Asp.net core 在Blazor中延迟任务而不阻塞UI

我在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任务？

一个带有倒计时的组件

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

@时间
@代码{
[参数]公共整数时间{get；set；}=5；
公共异步void StartTimerAsync（）
{
而（时间>0）
{
时间--；
StateHasChanged（）；
等待任务。延迟（1000）；
}
}
受保护的覆盖无效OnInitialized（）
=>StartTimerAsync（）；
}

用法：

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

在客户端Blazor上测试。在服务器端Blazor中的行为应该是相同的。

---

希望这有帮助

我不明白。有什么区别？为什么OP的代码块与您的代码块不同？方法签名中的

异步无效

async void

基本上是启动和遗忘，而

async Task

将等待整个任务完成。另一个选项是使用System.Timer.Timer类，使用相同的

异步void

方式，而不是while循环。