JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのデバウンス（Debounce）とは？仕組みと実装例をわかりやすく解説

デバウンス（Debouncing）とは

デバウンスとは、不要で時間のかかる処理を減らすことで、ブラウザのパフォーマンスを向上させるためのテクニックです。特定の操作を実行するのに時間がかかる機能は数多く存在します。その代表例として、ECサイトの検索バーを挙げてみましょう。

なぜデバウンスが必要なのか：具体例

あるユーザーが「Tutorix学習キット」という商品を探している場面を想定します。ユーザーは検索バーに商品名を一文字ずつ入力していきます。一文字入力するたびに、目的の商品を取得するためにブラウザからサーバーへAPIリクエストが送信されます。

「Tutorix学習キット」が17文字だとすると、ユーザーはブラウザからサーバーへ合計17回のAPI呼び出しを行うことになります。さらに、数百万人のユーザーが同じ検索を行えば、数十億回ものAPIリクエストが発生してしまいます。このような大量のリクエストが同時に発生すれば、ブラウザのパフォーマンスは明らかに低下するでしょう。

この問題を解決するために活躍するのがデバウンスです。

デバウンスの仕組み

上記のシナリオでは、デバウンスによって2つのキーストローク（キー入力）の間に時間間隔を設けます。仮にその間隔を2秒とした場合、前回のキー入力から2秒以上経過したときにのみAPI呼び出しが実行されます。2秒間の待機中にユーザーはさらに文字を入力する可能性があるため、途中の文字に対するAPI呼び出しを削減できます。結果としてAPI呼び出しの回数が減り、ブラウザのパフォーマンスが向上します。

注意すべき点として、デバウンス関数はキー入力のたびに更新されるという特性があります。

実装例の解説

次の例では、ボタンにイベントリスナーを設定し、クリック時にdebounce関数を呼び出しています。debounce関数は2つの引数を受け取ります。1つ目は実行したい関数、2つ目は遅延時間（ミリ秒）です。また、タイマー変数が宣言されており、指定した時間が経過した後にdebounce関数内の処理が実行されます。

ボタンがクリックされるとアラートボックスが開き、メッセージが表示されます。ここで重要なのは、遅延時間（2秒）以内に再度ボタンがクリックされた場合、最初のタイマーがクリアされ、新しいタイマーが開始されるという点です。この動作を実現するためにclearTimeout()関数を使用しています。

コード例

<html>
<body>
<input type = "button" id="debounce" value = "Debounce">
<script>
   var button = document.getElementById("debounce");
   var debounce = (func, delay) => {
      let Timer
      return function() {
         const context = this
         const args = arguments
         clearTimeout(Timer)
         Timer = setTimeout(() =>
            func.apply(context, args), delay)
      }
   }
   button.addEventListener('click', debounce(function() {
      alert("Hello\nNo matter how many times you" +
      "click the debounce button, I get " +"executed once every 2 seconds!!")}, 2000));
</script>
</body>
</html>

上記のコードを実行すると、画面には「Debounce」ボタンが表示されます。

ボタンをクリックして2秒待つと、以下のようなアラートボックスが出力として表示されます。

実行結果

このように、たとえボタンを何度連続でクリックしても、最後のクリックから2秒が経過した時点で一度だけ関数が実行されることが確認できます。これこそがデバウンスの基本的な動作であり、検索フォームやスクロールイベント、リサイズイベントなど、高頻度で発生しうるイベントの処理を最適化する際に非常に有効な手法です。

  1. JavaScriptの関数式（Function Expression）とは？特徴と使い方を解説

    JavaScriptにおける関数式（Function Expression）とは、関数を変数に代入して定義する方法のことです。代入された関数は、その変数名を使って後から呼び出すことができます。 関数式の主な特徴 関数を変数に格納し、変数名を指定して呼び出せる 通常の関数宣言（function declaration）と異なり、ホイスティング（巻き上げ）が行われないため、定義よりも前に呼び出すことはできない 多くの場合、名前を持たない「無名関数（匿名関数）」として定義される コールバック関数や即時実行関数（IIFE）など、さまざまな場面で活用できる この「ホイスティングされない」という点が重

  2. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2