如何在C# Blazor中执行类似setTimeout的无限循环并更新UI？

核心思路 #

Blazor中没有原生的setTimeout方法，但可以用Task.Delay()模拟异步延迟，配合异步循环实现无限执行逻辑，同时通过StateHasChanged()主动通知UI更新。

具体实现步骤 #

1. 编写异步循环方法 #

在组件类中定义异步方法，用while(true)构建无限循环，每次循环等待指定延迟后更新数据，再触发UI刷新。

2. 处理资源释放 #

为避免内存泄漏，需要在组件销毁时终止循环。使用CancellationTokenSource控制循环生命周期，在组件Dispose方法中取消令牌。

3. 启动循环 #

在组件生命周期方法（如OnInitializedAsync）中启动异步循环。

完整代码示例 #

@implements IDisposable

<h3>实时计数器: @_counter</h3>

@code {
    private int _counter = 0;
    private CancellationTokenSource _cts = new();

    protected override async Task OnInitializedAsync()
    {
        await RunInfiniteLoopAsync(_cts.Token);
    }

    private async Task RunInfiniteLoopAsync(CancellationToken cancellationToken)
    {
        while (!cancellationToken.IsCancellationRequested)
        {
            // 模拟1秒延迟（对应setTimeout的效果）
            await Task.Delay(1000, cancellationToken);
            
            // 更新数据
            _counter++;
            
            // 通知Blazor重新渲染UI
            StateHasChanged();
        }
    }

    public void Dispose()
    {
        // 组件销毁时终止循环并释放资源
        _cts.Cancel();
        _cts.Dispose();
    }
}

关键注意事项 #

• 禁用Thread.Sleep()：它会阻塞主线程导致UI冻结，Task.Delay()是异步延迟，不会影响UI响应。
• 必须调用StateHasChanged()：异步操作更新组件字段后，Blazor无法自动检测变化，需手动调用此方法触发UI刷新。
• 使用取消令牌：无限循环若不终止，组件销毁后会持续运行造成内存泄漏，CancellationToken可在组件销毁时安全停止循环。

内容的提问来源于stack exchange，提问作者Shane