在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秒钟，对变量（文本字段等）的任何一种或两种方式的绑定更新都处于暂停状态，直到关闭Notification并继续执行Task。

如何在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中的行为应相同。希望对您有所帮助