Debounceとは?
イベントが発生した直後に同じイベントが発生した場合、最後に呼び出されたイベントのみ実行される仕組み。
短時間に大量にイベントが呼び出されるようなユースケースにおいて、処理を間引きすることでシステムの負荷を軽減する手法
例
一番良く見かけるのがTwitterなどの検索バーの入力支援
1文字入力されるごとに検索処理を走らせるととんでもない量のリクエストが発生してしまうので、
人間がタイピングする速度間で発生したイベントをいい感じに間引いている。
この場合だとからおけ
という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();
});
}
}