在 Blazor 中延迟任务而不阻塞 UI

Question

我在 Blazor 中创建了一个 .razor 通知组件，我试图在 xx 秒后自动关闭通知 div。

到目前为止，它适用于这种方法

 private async Task CloseToast(Guid Id, bool autoclose = false)
{
    if (autoclose)
    {
        await Task.Delay(TimeSpan.FromSeconds(5));
    }

   //Code to remove the notification from list
    StateHasChanged();
}

问题是 UI 数据绑定卡住了 5 秒钟，任何一种或两种方式绑定更新到变量（文本字段等）都被暂停，直到通知关闭并且任务恢复。

如何在 xx 秒后启动方法或代码块而不阻塞 Blazor 中的主 UI 任务？

Answer 1

带有倒计时计时器的组件

<h3>@Time</h3>

@code {
    [Parameter] public int Time { get; set; } = 5;

    public async void StartTimerAsync()
    {
        while (Time > 0)
        {
            Time--;
            StateHasChanged();
            await Task.Delay(1000);
        }
    }

    protected override void OnInitialized()
        => StartTimerAsync();
}

用法：

<Component />
<Component Time="7"/>

在客户端 Blazor 上测试。在服务器端 Blazor 中的行为方式应该相同。希望这可以帮助