Отложите задачу в Blazor, не блокируя пользовательский интерфейс

Я создал компонент уведомлений .razor в Blazor, и я пытаюсь автоматически закрыть блок уведомлений через xx секунд.

Пока он работает с этим методом

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

Проблема в том, что в течение 5 секунд привязка данных пользовательского интерфейса застревает, любое одно- или двустороннее обновление привязки к переменным (текстовые поля и т. Д.) Приостановлено до тех пор, пока уведомление не будет закрыто и задача не возобновится.

Как я могу запустить метод или блок кода через xx секунд, не блокируя основную задачу пользовательского интерфейса в Blazor?


asp.net-core blazor blazor-server-side
person Francesco Cristallo    schedule 08.10.2019    source источник

Ответы (1)


arrow_upward
14
arrow_downward

Компонент с таймером, который ведет обратный отсчет


<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. Надеюсь это поможет

person Zsolt Bendes    schedule 10.10.2019
comment
Я не понимаю. В чем разница? Почему код OP блокируется, а ваш - нет? - person henon; 09.06.2020
comment
async void в сигнатуре метода имеет значение. async void в основном это выстрелил и забыл, а async Task будет ждать, пока вся задача не будет выполнена. Другой вариант - использовать класс System.Timer.Timer с тем же способом async void вместо цикла while. - person Zsolt Bendes; 09.06.2020