JavaScriptのデバウンス（debounce）関数とは？仕組みと実装方法をわかりやすく解説

デバウンス（debounce）関数とは、ある関数が実行される頻度を制限するためのテクニックです。Web開発でよく使われるパターンの一つで、パフォーマンス最適化に欠かせない存在です。

デバウンスが必要な理由

典型的な例として、オートコンプリート機能付きの検索バーを考えてみましょう。ユーザーがキーを入力するたびにサーバーへリクエストを送ると、不要なネットワーク通信やメモリ消費が発生し、サーバーにも大きな負荷がかかってしまいます。

そこで役立つのがデバウンスです。一定時間内に発生した呼び出しをまとめ、実際に関数が実行される回数を制限することで、無駄なAPIリクエストを大幅に減らすことができます。

自作デバウンス関数の実装例

JavaScriptでは、実際に実行したい関数を引数として受け取り、レート制限付き（スロットリング）で実行する独自のデバウンス関数を簡単に作成できます。

const debounce = (cb, time) => {
    let timeout;
    return function() {
        const wrapperFunc = () => cb.apply(this, arguments);
        clearTimeout(timeout);
        timeout = setTimeout(wrapperFunc, time);
    }
}

この関数はコールバック関数と遅延時間（ミリ秒）の2つの引数を受け取ります。

動作の仕組み

処理の流れは以下の通りです。

• 関数が呼ばれるたびに、clearTimeout() で前回セットされたタイマーをキャンセルします。
• その後、setTimeout() で新しいタイマーを設定します。
• 指定時間内に再度呼び出しが行われなければ、ようやく本来の関数が実行されます。

たとえば、遅延時間を250msに設定した場合を考えてみましょう。最初のAPI呼び出しが1ms時点で発生しても、251msになるまでの間は、この関数が何回呼び出されても新しいAPIリクエストは送信されません。つまり、連続的な入力が一段落したタイミングでのみ、実際の処理が実行されるのです。

自分のコードの中で直接関数を呼び出している箇所を、このデバウンス関数経由の呼び出しに置き換えるだけで、簡単に導入できます。検索フォーム、スクロールイベント、リサイズイベントなど、高頻度で発火するイベントの処理にぜひ活用してみてください。