JavaScript の手ぶれ補正とスロットリングの説明

安定

自動ドアは人を感知してドアを開け、5 秒間のカウントダウンを開始します。5 秒以内に別の人がドアに近づくと、ドアは人を感知して再び 5 秒間のカウントダウンを開始します。
イベントがトリガーされると、遅延が設定されます。この期間中にイベントが再度トリガーされると、遅延が終了してアクションが実行されるまで遅延がリセットされます（複数のトリガーを防ぐため）。

ウェブアプリケーション

ページサイズの変更に関する統計
スクロールページ位置の統計
入力ボックスでの連続入力の要求回数を制御する

まず、ボタンをクリックして、 console.log('pay money')

<本文>
  <button id="btn">クリック</button>
</本文>
<スクリプト>
  定数 btn = document.getElementById('btn')
  関数payMoney() {
    console.log('お金を支払う');
  }
  btn.addEventListener('click'、payMoney) を実行します。
</スクリプト>

デバウンスの定義

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
}
関数デバウンス(func) {
  // 関数内の関数を返し、クリックされたときにのみ関数を返します return function () {
    関数()
  }
}
btn.addEventListener('click'、debounce(payMoney))

遅延の設定

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
}
関数 debounce(func, delay) {
  関数を返す（）{
    setTimeout(_ => func(), 遅延)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

遅延のクリア: 実行に失敗しました

理由

クリックするたびに、戻り関数の内容が実行されます

各クリックの実行機能は独立しており、相互に干渉しません。

両者の間には接続がないため、クリア遅延はここではまったく機能しません。

これらの独立した実行関数を接続するには、スコープチェーン（クロージャ）を使用する必要があります。

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
}
関数 debounce(func, delay) {
  関数を返す（）{
    タイマーを鳴らす
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => func(), 遅延)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

タイマーを戻り関数の外側に配置して、リスニングイベントが定義されると同時にtimer変数が定義されるようにします。

スコープチェーンにより、すべての独立した実行関数がこのタイマー変数にアクセスできます。

そして、このタイマー変数は一度だけ作成されます。ユニークです。タイマーに値を割り当てて遅延させるだけです。

各クリア遅延は最後に定義された遅延をクリアします。これは、複数の関数が同じ外部変数を共有するのと同じです。

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
}
関数 debounce(func, delay) {
  タイマーを鳴らす
  関数を返す（）{
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => func(), 遅延)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

このコードでは、これはウィンドウを参照しますか?

コールバックのため、ランタイムはすでにWindowの下にある

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
  console.log(これを);
}
関数 debounce(func, delay) {
  タイマーを鳴らす
  関数を返す（）{
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => func(), 遅延)
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

解決

setTimeout の前にこれを保存します。今回はボタンを指します。

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
  console.log(これを);
}
関数 debounce(func, delay) {
  タイマーを鳴らす
  // この関数はクリックされたときにのみ返されるので、これはボタンを指す戻り関数 () です {
    コンテキスト = this
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => {
      func.apply(コンテキスト)
    }、 遅れ）
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

パラメータの問題を考慮し、argを追加する

定数 btn = document.getElementById('btn')
関数payMoney() {
  console.log('お金を支払う');
  console.log(これを);
}
関数 debounce(func, delay) {
  タイマーを鳴らす
  関数を返す（）{
    コンテキスト = this
    args = 引数
    クリアインターバル(タイマー)
    タイマー = setTimeout(_ => {
      func.apply(コンテキスト)
      console.log(コンテキスト、引数);
    }、 遅れ）
  }
}
btn.addEventListener('click'、デバウンス(payMoney、1000))

スロットリング

一度トリガーすると、将来的に複数のトリガーが発生できなくなります

スクロール画面: ユーザーのスクロール動作をカウントして、対応するWebページの応答を作成します。

ユーザーがスクロールし続けるとリクエストが生成され続け、リクエストの数が増え続けるため、ネットワークの輻輳が発生しやすくなります。

イベントがトリガーされたらすぐにタスクを実行し、時間間隔の制限を設定できます。この間、ユーザーがどのようにスクロールしても、操作は無視されます。

時間が経過した後、ユーザーがスクロール動作を行っていることが検出された場合、タスクが再度実行されます。時間間隔を設定する

まず、ページのサイズと背景色を変更するコードを記述します

関数カラーリング() {
  r = Math.floor(Math.random() * 255) とします。
  g = Math.floor(Math.random() * 255) とします。
  b = Math.floor(Math.random() * 255) とします。
  document.body.style.background = `rgb(${r}, ${g}, ${b})`
}
window.addEventListener('resize', 色付け)

関数スロットル(func, delay) {
  タイマーを鳴らす
  関数を返す（）{
    タイマー = setTimeout(_ => {
      関数()
    }、 遅れ）
  }
}
window.addEventListener('resize', throttle(coloring, 2000))

トリガーされたイベントが時間間隔内であるかどうかを判断する

含まれていない: トリガーイベント
In: イベントは発生しません

関数スロットル(func, delay) {
  タイマーを鳴らす
  関数を返す（）{
    // タイマーに値が割り当てられている場合は、直接戻ります。つまり、タスクは実行されません。if (timer) {
      戻る
    }
    // この時点ではタイマーに値が割り当てられていないか、タイマーが実行されています // 遅延実行のためにタイマーに値を割り当てます timer = setTimeout(_ => {
      関数()
      // 遅延実行後、タイマーの値をクリアする必要があります。timer = null
    }、 遅れ）
  }
}
window.addEventListener('resize', throttle(coloring, 2000))

この点を解決してください（現在の例はウィンドウの下にありますが）

関数スロットル(func, delay) {
  タイマーを鳴らす
  関数を返す（）{
    コンテキスト = this
    args = 引数
    // タイマーに値が割り当てられている場合は、直接戻ります。つまり、タスクは実行されません。if (timer) {
      戻る
    }
    // この時点ではタイマーに値が割り当てられていないか、タイマーが実行されています // 遅延実行のためにタイマーに値を割り当てます timer = setTimeout(_ => {
      func.apply(コンテキスト、引数)
      // 遅延実行後、タイマーの値をクリアする必要があります。timer = null
    }、 遅れ）
  }
}
window.addEventListener('resize', throttle(coloring, 1000))

スロットリングコア: イベント間隔もう一つの一般的な時間間隔は、Dateオブジェクトを使用することです

関数スロットル(func, delay) {
  // 時間間隔が経過したかどうかを判断するために、前の時点と比較する必要があります // 実行されるたびに自動的に変更されるのを避けるために、戻り関数の外側で let pre = 0
  関数を返す（）{
    // 関数が実行されたときの時間を保存する let now = new Date()
    // 最初は必ず実行されます if (now - pre > delay) {
      // 時間間隔が経過し、関数を実行できるようになった func()
      // 実行後、間隔ポイントをリセットします pre = now
    }
  }
}
window.addEventListener('resize', throttle(coloring, 1000))

パラメータの問題を解く

関数スロットル(func, delay) {
  pre = 0 とする
  関数を返す（）{
    コンテキスト = this
    args = 引数
    now = new Date() とします
    if (現在 - 事前 > 遅延) {
      func.apply(コンテキスト、引数)
      前 = 今
    }
  }
}
window.addEventListener('resize', throttle(coloring, 1000))