C# Blazor：倒數計時器

Question

我是 C# 的新手，正在嘗試使用System.Timer.Timers創建一個簡單的倒數計時器。 它沒有按預期工作，我在 inte.net 上搜索了解決方案，但它並沒有真正解決我的問題。 我想要的是當用戶單擊開始按鈕時，它開始並顯示倒計時。 但是雖然定時器有點工作，但當我點擊一次按鈕時它並沒有持續顯示定時器，而是我需要多次點擊開始按鈕才能看到倒計時數字，否則定時器顯示不會改變。 這是代碼。

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