Blazor中的StopWatch组件

Question

在探索了很多之后，我们还没有blazor组件秒表。我需要在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;
    }
}

Answer 1

正如Henk Holterman所说，你需要一个计时器。但是为了使定时器执行的操作线程安全和可控(暂停、恢复、停止等)，你需要大量的样板代码。

我在Blazor中创建了一个秒表演示，其中基于计时器的操作由一个名为Recurop的库处理，该库将计时器操作抽象为一个RecurringOperation对象，使代码变得更简单、更整洁，并使您能够绑定UI元素属性以对循环操作(计时器操作)的状态/状态的变化做出反应。例如，在运行操作时启用“暂停”按钮，但在操作停止时禁用“暂停”按钮，等等。

如果您想查看Blazor秒表网页的实际效果，请访问：https://tdmr87.github.io/BlazorStopwatchWithRecurop/

如果您想在Blazor中查看秒表演示的代码，请访问：https://github.com/TDMR87/BlazorStopwatchWithRecurop

如果您对处理递归操作(计时器)的库感兴趣，请转到Recurop github页面：https://github.com/TDMR87/Recurop

Recurop是我的个人项目，如果你想使用它，可以在NuGet上找到它。

干杯

Answer 2

你需要一个计时器：

@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, 0, 1000);
}

public void Stop()
{
    this.stopTime = DateTime.Now;
    _timer?.Dispose();
    _timer = null;
}

public void Dispose()
{
    _timer?.Dispose();
}

然后向elapsedtime显示您想要它的方式和位置。