私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
購入するEPUB/PDF
チュートリアルマップ
レッスンに戻る

Debounce decorator

重要性: 5

debounce(f, ms) デコレータの結果は、ms ミリ秒毎に最大一度 f への呼び出しを渡すラッパーです。

言い換えると、“デバウンス” 関数を呼び出すと、最も近い ms ミリ秒までの他の未来はすべて無視されることが保証されます。

例:

let f = debounce(alert, 1000);

f(1); // すぐに実行される
f(2); // 無視される

setTimeout( () => f(3), 100); // 無視される (100 ms だけ経過した)
setTimeout( () => f(4), 1100); // 実行される
setTimeout( () => f(5), 1500); // 無視される (最後の実行から 1000ms 経過していない)

実践において、debounce はこのような短い期間の中で新しいことができないことを知ったときに、何かを取得/更新する関数に対して役立ちます,リソースを無駄にしないように。

テストと一緒にサンドボックスを開く

function debounce(f, ms) {

  let isCooldown = false;

  return function() {
    if (isCooldown) return;

    f.apply(this, arguments);

    isCooldown = true;

    setTimeout(() => isCooldown = false, ms);
  };

}

debounce 呼び出しはラッパーを返します。そこには2つの状態があります:

  • isCooldown = false – 実行する準備ができている
  • isCooldown = true – タイムアウトを待っている

最初の呼び出しで、 isCooldown は偽なので、呼び出しは処理され、状態は true になります。

isCooldown が true の間、すべての他の呼び出しは無視されます。

その後、与えられた遅延後に setTimeout がそれを false に戻します。

function debounce(f, ms) {

  let isCooldown = false;

  return function() {
    if (isCooldown) return;

    f.apply(this, arguments);

    isCooldown = true;

    setTimeout(() => isCooldown = false, ms);
  };

}

サンドボックスでテストと一緒に解答を開く