JavaScript のデバウンス、完全に理解した

JavaScript の世には デバウンス(debounce) と スロットル(throttle) という便利な手法があることを最近知りました。

「これを知らずに今まで開発していたなんて…あの時のロジックもっと簡単に書けたやん」と今悶えています。

残念ながら弊社エンジニアは誰も知らない可能性が高いので、メモして共有するため記事にしました。

スロットルの記事はこちら

デバウンス (debounce)

同じイベントが連続して発火するような状況で、発火した回数分処理を実行すると負荷が高くなってしまう場合に、途中のイベント処理は実行せず、最後のイベント発火から指定した秒数待った後に処理を実行する手法。

例えばサイトでフォームの値を入力後にイベントを発火させたいが、ユーザーが連続して入力する場合は入力完了を待ちたいという場合に使えますね。

雑なサンプルコード

'test-debounce' という id を持つボタンがあり、最後にクリックしてから1秒後に 'Click Event Called' という文字列と現在日時とコンソールに出力する。1秒経過前に再度クリックが発生した場合は、その前の処理は実行されない。

/**
 * @param {Function} anonymousFunction 遅延実行される無名関数
 * @param {number} delay 遅延時間(ms)
 * @returns
 */
function debounce(anonymousFunction, delay)
{
    let inDebounce;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(inDebounce);
        inDebounce = setTimeout(() => anonymousFunction.apply(context, args), delay);
    }
}

/**
 * 1秒後に 'Click Event Called' という文字列と現在日時を console に出力する
 */
const clickEvent = debounce(function() {
    console.log('Click Event Called');
    console.log(new Date());
}, 1000);

/**
 * ページロード後、id が test-debounce の要素に対して click イベントリスナーを追加
 */
window.addEventListener('load', function() {
    document.getElementById('test-debounce').addEventListener('click', clickEvent);
});

１回目クリックして1秒待ったのち、3秒間ほど高橋名人並みにクリックし続けた上で止めた場合のサンプル

2024/02/20 14:03:31 1回目のクリック
2024/02/20 14:03:32 1秒後 console に表示される。その後3秒間高橋名人並みにクリック連打
2024/02/20 14:03:33 クリックし続けており、 console には表示されない。
2024/02/20 14:03:34 クリックし続けており、 console には表示されない。
2024/02/20 14:03:35 クリックし続けており、 console には表示されない。クリックを止める
2024/02/20 14:03:36 最後のクリックから1秒経過したので、console に表示される

感想

めっちゃ便利。もっと早く知りたかった。