Blazor 中的秒表组件

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

您需要一个计时器：

@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您想要的方式和位置。

Answer 2

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

我在 Blazor 中创建了一个秒表演示，其中基于计时器的操作由一个名为 Recurop 的库处理，它将一个计时器操作抽象为一个 RecurringOperation 对象，并使代码更加简单和清晰，它使您能够绑定 UI 元素属性以响应 state/status 重复操作（计时器操作）的变化。例如，当操作运行时启用“暂停”按钮，但当操作停止时禁用“暂停”按钮等

如果您想查看运行中的 Blazor 秒表网页，请转到：https://tdmr87.github.io/BlazorStopwatchWithRecurop/

如果要查看 Blazor 中秒表演示的代码，请转到： https://github.com/TDMR87/BlazorStopwatchWithRecurop

如果您对处理重复操作（计时器）的库感兴趣，请转到 Recurop github 页面：https://github.com/TDMR87/Recurop

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

干杯

Blazor 中的秒表组件

StopWatch Component in Blazor

timer

stopwatch

blazor