问题描述
经过大量研究后,我们没有炫耀的秒表。 我需要在“ blazor”页面中显示“经过时间” 下面是我的代码,我们可以使用“开始”和“停止”按钮来计算经过时间 我有点迷恋如何在blazor页面中调用和显示经过的时间。有什么建议吗?
@using System.Diagnostics;
<p> <button @onclick=@Start>Start</button></p>
<p> <button @onclick=@Stop>Stop</button></p>
@code
{
protected override void OnInitialized()
{
base.OnInitialized();
Stopwatch sw = new Stopwatch();
TimeSpan tt1 = TimeSpan.Zero;
}
private double elapsedtime;
private DateTime startTime;
private DateTime stopTime;
private bool running = false;
public void Start()
{
this.startTime = DateTime.Now;
this.running = true;
}
public void Stop()
{
this.stopTime = DateTime.Now;
this.running = false;
}
public double elapsedtimeSecs()
{
TimeSpan interval;
if (running)
interval = DateTime.Now - startTime;
else
interval = stopTime - startTime;
return interval.TotalSeconds;
}
}
解决方法
您需要一个计时器:
@implements IDisposable
...
private System.Threading.Timer _timer;
public void Start()
{
this.startTime = DateTime.Now;
_timer = new System.Threading.Timer(async _ =>
{
elapsedtime = ElapsedTimeSecs();
await InvokeAsync(StateHasChanged);
},null,1000);
}
public void Stop()
{
this.stopTime = DateTime.Now;
_timer?.Dispose();
_timer = null;
}
public void Dispose()
{
_timer?.Dispose();
}
然后显示elapsedtime
的方式和位置。
正如 Henk Holterman 所说,您需要一个计时器。但是为了使计时器执行的操作线程安全且可控(暂停、恢复、停止等),您需要大量样板代码。
我在 Blazor 中创建了一个秒表演示,其中基于 Timer 的操作由名为 Recurop 的库处理,该库将 Timer 操作抽象为 RecurringOperation 对象,并使代码更简单、更清晰,并使您能够绑定 UI元素属性以对重复操作(计时器操作)的状态/状态的变化做出反应。例如,在操作运行时启用“暂停”按钮,但在操作停止时禁用“暂停”按钮等。
如果您想查看正在运行的 Blazor 秒表网页,请转到:https://tdmr87.github.io/BlazorStopwatchWithRecurop/
如果您想在 Blazor 中查看秒表演示的代码,请访问: https://github.com/TDMR87/BlazorStopwatchWithRecurop
如果您对处理重复操作(计时器)的库感兴趣,请访问 Recurop github 页面:https://github.com/TDMR87/Recurop
Recurop 是我的个人项目,如果您想尝试一下,可以在 NuGet 上找到它。
干杯