在Blazor中每隔两秒显示字符串列表中的项目

@page "/timer"

@inject IJSRuntime JSRuntime

<h3>String List</h3>
<ul>
    @foreach (var item in stringList)
    {
        <li>@item</li>
    }
</ul>

@code {
    private List<string> stringList = new List<string>();
    private CancellationTokenSource cancellationTokenSource;

    protected override async Task OnInitializedAsync()
    {
        cancellationTokenSource = new CancellationTokenSource();
        await StartTimer();
    }

    private async Task StartTimer()
    {
        var interval = TimeSpan.FromSeconds(2);

        await JSRuntime.InvokeVoidAsync("startTimer", DotNetObjectReference.Create(this), interval);
    }

    [JSInvokable]
    public void AddStringToList(string item)
    {
        stringList.Add(item);
        StateHasChanged();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("registerCallback", DotNetObjectReference.Create(this));
        }
    }

    public async Task StopTimer()
    {
        cancellationTokenSource.Cancel();
        await JSRuntime.InvokeVoidAsync("stopTimer");
    }
}

let timerId;

function startTimer(dotNetReference, interval) {
    timerId = setInterval(() => {
        dotNetReference.invokeMethodAsync('AddStringToList', 'New Item');
    }, interval);
}

function stopTimer() {
    clearInterval(timerId);
}

function registerCallback(dotNetReference) {
    window.addStringToList = (item) => {
        dotNetReference.invokeMethodAsync('AddStringToList', item);
    };
}