0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

C#でDebounceしたかった

Last updated at Posted at 2022-08-27

Debounceとは?

イベントが発生した直後に同じイベントが発生した場合、最後に呼び出されたイベントのみ実行される仕組み。
短時間に大量にイベントが呼び出されるようなユースケースにおいて、処理を間引きすることでシステムの負荷を軽減する手法

一番良く見かけるのがTwitterなどの検索バーの入力支援
1文字入力されるごとに検索処理を走らせるととんでもない量のリクエストが発生してしまうので、
人間がタイピングする速度間で発生したイベントをいい感じに間引いている。

inputsample.gif

この場合だとからおけという4文字を検索しているので4回検索が走りそうだが、からおけの2回しか検索が走っていない。

定義側

public class DebounceDispatcher
    {
        //待機時間
        private int _debounceTime;
        //キャンセルトークン
        private CancellationTokenSource? _cancellationToken = null;
        public DebounceDispatcher(int debounceTime = 300)
        {
            _debounceTime = debounceTime;
        }

        public void Debounce(Action func)
        {
            {
                //進行中のTaskをキャンセル(初回はnullの可能性がある)
                _cancellationToken?.Cancel();
                _cancellationToken = new CancellationTokenSource();

                Task.Delay(_debounceTime, _cancellationToken.Token)
                    .ContinueWith(task =>
                    {
                        //taskが中断されずに実行されていたときのみコールバックを発火
                        if (task.IsCompletedSuccessfully)
                        {
                            func();
                        }
                    }, TaskScheduler.Default);
            };
        }
    }
}

使う側

<input @oninput="入力文字を遅れて大文字に変換する"/>
<p>@_convertedValue</p>

@code {
    private string? _convertedValue;
    //間引き間隔指定
    private DebounceDispatcher dd = new DebounceDispatcher(500);


    private void 入力文字を遅れて大文字に変換する(ChangeEventArgs e)
    {
        var rawValue = e.Value as string;

        //対象処理の呼び出し
        dd.Debounce(() =>
        {
            _convertedValue = rawValue?.ToUpper();
            StateHasChanged();
        });
    }
}

blazorsample.gif

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?