Blazor中的StopWatch组件

如何解决Blazor中的StopWatch组件

经过大量研究后，我们没有炫耀的秒表。 我需要在“ 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 上找到它。

干杯