JavaScript の debounce()関数

この記事では、JavaScript の debounce() 関数を使用してアプリケーションのパフォーマンスを向上させる方法について説明します。

JavaScript のデバウンスという用語を理解する

JavaScript は、デバウンス手法を使用してブラウザーのパフォーマンスを高速化します。デバウンスはスロットルの相対的なものであり、どちらもオンラインアプリケーションのパフォーマンスを向上させます。

それにもかかわらず、それらは多くの状況で観察されます。デバウンスは、最終状態と見なされるすべての場合に使用されます。

たとえば、ユーザーが入力を完了するまで、先行入力検索結果の取得を遅らせています。すべての中間状態の速度を制御したい場合に利用する理想的なツールはスロットルです。

JavaScript で debounce() 関数を使用する

関数をデバウンスする方法を理解するのに役立つコード図を次に示します。

function debounce(jss, timeout = 3000) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      jss.apply(this, args);
    }, timeout);
  };
}

function userInput() {
  console.log('Changing data');
}

const workonChange = debounce(() => userInput());

実行コード

それで、ここで何が起こっているのですか？debounce() は、次の 2つの関数を実行する独自の関数です。

• タイマー変数にスコープを割り当てる
• 特定の時間に実行するように関数を設定する

これがどのように機能するかを確認するために、テキスト入力の最初のユースケースを見てみましょう。

debounce() 関数は、訪問者が最初の文字を書き込んでキー（タイマー）を離すと、最初に clearTimeout を使用してタイマーをリセットします。何もスケジュールされていないため、現時点ではこの手順は必要ありません。

関数 userInput() は 3000 ミリ秒（3 秒）で呼び出されると予想されます。ただし、訪問者が入力を続けると、重要なリリースごとに debounce() 関数が再トリガーされます。

すべての呼び出しでタイマーをリセットする必要があります。つまり、以前の userInput() の準備をキャンセルして、新しい時間（3000 ミリ秒後）に再スケジュールする必要があります。これは、訪問者が 3000 ミリ秒以内にキーストロークを維持している限り継続します。

以前のスケジュールはクリアされないため、userInput() が呼び出されます。

出力：

s、h、i、または v と入力すると、setTimeout メソッドが延期され続けることがわかります（呼び出された関数 userInput にもかかわらず）。入力中に 3 秒間一時停止すると、主な機能である Changing data が出力されます。

デバウンスは、すべての操作ではなく、設定された休止時間の後に関数を呼び出すだけで、アプリケーションの速度を向上させます。ただし、これを自分で行う必要はありません。

たとえば、デバウンス機能は Lodash で使用できます。寄稿者は、デバウンス機能を改善するために Lodash などのライブラリを改善しました。

この記事では、デバウンスとは何か、なぜそれが役立つのか、JavaScript でそれを行う方法について説明しました。