【JavaScript】debounce（デバウンス）とは？実装方法を解説

Webサイトやアプリの開発中に、ウィンドウのリサイズやinputの入力時に何らかの処理を行いたい場面がよくあります。

しかし、これらのイベントが発生するたびに処理が連続して呼び出されると、ブラウザに大きな負担がかかり、パフォーマンスの低下につながることがあります。

そんな時に便利なのが、debounceテクニックです。

今回は、JavaScriptでdebounceを利用して、無駄な処理の実行を減らし、Webサイト・アプリのパフォーマンスを向上させる方法を解説します。

debounce（デバウンス）とは？

debounceとは、イベントが発生してから一定期間処理を待機し、その期間内に同じイベントが発生しなかった場合に関数を実行するテクニックのことを指します。

例えば、inputイベント時に何らかの処理を行いたい場合、次のような記述をすることがあります。

// 素のJavaScriptの場合
document.getElementById("inputElement").addEventListener("input", function() {
	// inputイベント時に実行したい処理を記述
});

// jQueryの場合
$("#inputElement").on("input", function() {
	// inputイベント時に実行したい処理を記述
});

しかし、この方法だと、テキストが1文字1文字入力されるたびに連続して関数が呼び出されてしまい、Webサイトやアプリケーションのパフォーマンスが低下する可能性があります。

このような場合に、debounceを使用することで、余計な処理が行われずユーザーが入力を終えたタイミングで1回だけ処理を実行させることができます。

debounceの実装方法

実装手順は以下の通りです。

STEP. 1：debounce関数を定義する

まずはdebounce関数を用意します。

debounce関数では、以下のように第一引数として渡したい処理内容を記述した関数、第二引数に関数が実行されるまでの遅延時間を設定します。

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId); // 前回のタイマーをクリアする
    timeoutId = setTimeout(() => {
      // 新しいタイマーをセットする
      func.apply(this, args); // 指定した関数を実行する
    }, delay); // delay (遅延時間) だけ待ってから実行する
  };
}

argsには、イベントオブジェクトが配列として渡されますが、applyメソッドにより、その配列が展開され、個々の引数として関数に渡されます。

STEP. 2：実際に行いたい処理を定義する

続いて、実際に行いたい処理を定義します。

今回は例として、ユーザーが入力を終えた時点でその内容をコンソールに表示させるという処理を定義します。

function logMessage(event) {
  console.log(`入力された値: ${event.target.value}`);
}

event には、applyメソッドによって、args配列が展開され、第一引数としてイベントオブジェクトが渡ってきます。

STEP. 3：debounceを使ったイベントハンドラを設定する

最後に、debounceを使ったイベントハンドラを設定します。

const input = document.getElementById("input");

input.addEventListener(
  "input",
  debounce(logMessage, 500) // 500ms遅延させる
);

これで、イベントが連続で発生している間はclearTimeoutによって余計な関数の実行がキャンセルされ、実行回数を最小限に抑えることができます。

上の例では、ユーザーが入力を終えたタイミングでコンソールを確認すると、「入力された値: 実際に入力された内容」が1回だけ表示されます。

まとめ

今回はJavaScriptのdebounceテクニックを使って、リサイズやinputの入力時といった高頻度で発火するイベントを制御する方法を解説しました。

debounceを利用することで、余計な関数の実行がキャンセルできるので、Webサイト・アプリのパフォーマンスを向上させたい方は、ぜひ使ってみて下さい。

今回は以上になります。最後までご覧頂き、ありがとうございました。