在不阻塞 UI 的情況下延遲 Blazor 中的任務

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

用法：

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

在客戶端 Blazor 上測試。在伺服器端 Blazor 中的行為方式應該相同。希望這可以幫助

您也可以使用 .NET並以毫秒Timer為System.Timers單位設置延遲。當它過去時，將觸發事件，您可以將邏輯放入事件處理程序中。如果您不想打擾所有配置和處置，Timer可以使用這個Nuget 包。它是一個非常方便的 Timer 包裝器，具有許多額外的功能，請參閱文件。

<AdvancedTimer Occurring="Times.Once()" IntervalInMilisec="@_closeInMs" AutoStart="true" OnIntervalElapsed="@(e => { IsVisible = false; })" />
@code {
 private int _closeInMs = 5000;
 ...
}

引用自：https://stackoverflow.com/questions/58295204