C# Blazor:倒数计时器
C# Blazor: Countdown Timer
我是 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;
}
}
}
更新计数器时调用StateHasChanged()
,以便更新UI个元素。
因为您的回调将 运行 在单独的线程上,您将需要使用 InvokeAsync 来调用 StateHasChanged()。
public void CountDownTimer(Object source, ElapsedEventArgs e)
{
if (counter > 0)
{
counter -= 1;
}
else
{
aTimer.Enabled = false;
}
InvokeAsync(StateHasChanged);
}
我是 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;
}
}
}
更新计数器时调用StateHasChanged()
,以便更新UI个元素。
因为您的回调将 运行 在单独的线程上,您将需要使用 InvokeAsync 来调用 StateHasChanged()。
public void CountDownTimer(Object source, ElapsedEventArgs e)
{
if (counter > 0)
{
counter -= 1;
}
else
{
aTimer.Enabled = false;
}
InvokeAsync(StateHasChanged);
}