前回の処理を取り消して新しく処理したい【Blazor】

経緯

前回の処理を取り消して、新しく処理を開始したい。

チェックボックスなどのたくさんクリックして行いがちな処理をTask.Delayを使って、3秒間待って、何の入力もないのであれば、処理を行い、入力があれば、前回の処理を取り消して処理を行いたい。

そうすることで無駄にAPI(処理)を呼ぶことを少なくしたい。

CancellingTokenで分かったこと

CancellingTokenの使いかたが全然わからなくて、このソースと戦っていた。

【分かったこと】

・Tokenを渡して次の処理で、前回の処理を消す必要があるため、前回のインスタンスのキャンセルをする必要がある。

・Delayでキャンセルされた以降の処理は行われない

もっとキャンセルについて理解を深めたい

ソース　blazorの環境(bootstrapのスピナーを利用している)

 

@page "/counter"

@if(IsWaiting)

{

    <div class="spinner-border text-primary" role="status">

        <span class="visually-hidden">Loading...</span>

    </div>    

}

<button style="width:1000px;height:25px;"

@onclick="( async () => await OnClick())" >push</button>

@code {

    private bool IsWaiting = false;

    private int Count = 0;

    private async Task OnClick()

    {

        _cancellationTokenSource.Add(new());

        var token = _cancellationTokenSource[Count].Token;

        if(IsWaiting)

        {

            _cancellationTokenSource[Count - 1].Cancel();

        }

        Count += 1;

        IsWaiting = true;

        try

        {

            await Task.Delay(3000,token);

            string test = "test";

            await Calling(test);                            

        }finally

        {

            IsWaiting = false;            

        }

    }

    List<CancellationTokenSource> _cancellationTokenSource = new();

    private async Task Calling(string test)

    {

        Console.WriteLine(test);        

    }

}