C# Blazor：倒数计时器

Question

我是 C# 的新手，正在尝试使用 System.Timer.Timers 创建一个简单的倒数计时器。它没有按预期工作，我在互联网上搜索了解决方案，但并没有真正解决我的问题。我想要的是当用户单击开始按钮时，它开始并显示倒计时。但是虽然定时器有点工作，但当我点击一次按钮时它并没有持续显示定时器，而是我需要多次点击开始按钮才能看到倒计时数字，否则定时器显示不会改变。这是代码。

@page "/"

<h1>Timer</h1>

<p>@counter</p>
<button @onclick="StartTimer">Start</button>


@code {
    private static System.Timers.Timer aTimer;
    private int counter = 60;
    public void StartTimer()
    {
        aTimer = new System.Timers.Timer(1000);
        aTimer.Elapsed += CountDownTimer;
        aTimer.Enabled = true;
    }

    public void CountDownTimer(Object source, System.Timers.ElapsedEventArgs e)
    {
        if (counter > 0)
        {
            counter -= 1;
        }
        else
        {
            aTimer.Enabled = false;
        }
    }
}

Answer 1

更新计数器时调用StateHasChanged()，以便更新UI个元素。

因为您的回调将运行在单独的线程上，您将需要使用 InvokeAsync 来调用 StateHasChanged()。

public void CountDownTimer(Object source, ElapsedEventArgs e)
{
    if (counter > 0)
    {
        counter -= 1;
    }
    else
    {
        aTimer.Enabled = false;
    }
    InvokeAsync(StateHasChanged);
}

C# Blazor：倒数计时器

C# Blazor: Countdown Timer

c#

blazor

system.timers.timer