Vue2.x - アンチシェイクとスロットリングの使用例

ユーティリティ:

// 手ぶれ防止エクスポート const debounce = (func, wait = 3000, immediate = true) => {
 タイムアウトを null にします。
 関数()を返す{
  コンテキストを this とします。
  args = 引数とします。
  if (timeout) clearTimeout(timeout);
  if (即時) {
   var callNow = !timeout; //最初のクリックは true、時間内の 2 回目のクリックは false、時間切れになると最初のクリックが繰り返されます timeout = setTimeout(() => {
    タイムアウト = null;
   }, wait); //タイマーID
   if (callNow) func.apply(context, args);
  } それ以外 {
   タイムアウト = setTimeout(関数() {
    func.apply(コンテキスト、引数);
   }、 待って）;
  }
 };
};
// タイムスタンプスキームエクスポート const throttleTime = (fn, wait = 2000) => {
 var pre = Date.now();
 関数()を返す{
  var コンテキスト = this;
  var args = 引数;
  var now = Date.now();
  if (now - pre >= wait) {
   fn.apply(コンテキスト、引数);
   pre = Date.now();
  }
 };
};
// タイマーソリューション export const throttleSetTimeout = (fn, wait = 3000) => {
 var タイマー = null;
 関数()を返す{
  var コンテキスト = this;
  var args = 引数;
  if (!タイマー) {
   タイマー = setTimeout(関数() {
    fn.apply(コンテキスト、引数);
    タイマー = null;
   }、 待って）;
  }
 };
};

vue での使用:

<テンプレート>
 <div class="main">
  <p>手ぶれ補正はすぐに実行されます</p>
  <button @click="click1">クリック</button>

  <br />

  <p>手ぶれ補正はすぐには行われません</p>
  <button @click="click2">クリック</button>

  <br />

  <p>スロットリング タイムスタンプ スキーム</p>
  <button @click="click3">クリック</button>

  <br />

  <p>スロットル タイマー ソリューション</p>
  <button @click="click4">クリック</button>
 </div>
</テンプレート>

<スクリプト>
'./utils' から { debounce、throttleTime、throttleSetTimeout } をインポートします。
エクスポートデフォルト{
 メソッド: {
  クリック1: デバウンス(
   関数（） {
    console.log('手ぶれ補正はすぐに実行されます');
   },
   2000年、
   真実
  ）、
  クリック2: デバウンス(
   関数（） {
    console.log('手ぶれ補正はすぐには実行されません');
   },
   2000年、
   間違い
  ）、
  クリック3: スロットルタイム(関数() {
   console.log('スロットルタイムスタンプスキーム');
  }）、
  クリック4: スロットル設定タイムアウト(関数() {
   console.log('スロットルタイマースキーム');
  })
 },
};
</スクリプト>

<スタイル スコープ lang="scss">
* {
 マージン: 0;
 フォントサイズ: 20px;
 ユーザー選択: なし;
}
。主要 {
 位置: 絶対;
 左: 50%;
 変換: translateX(-50%);
 幅: 500ピクセル;
}
ボタン {
 下部マージン: 100px;
}
</スタイル>

説明する：

画像安定化:

即時実行バージョン: 即時が true の場合、コマンドは最初にクリックされたときに実行され、再度クリックされても実行されません。待機時間が終了すると、次のクリックが有効になり、最初の 1 回のみ実行されます。

原理：

最初にクリックすると、timeoutID が存在せず、callNow が true であるため、対象コードがすぐに実行されます。 2 回目にクリックすると、timeoutID が存在し、callNow が false であるため、対象コードは実行されません。待機時間が終了すると、timeoutID が null に設定され、即時実行ロジックが繰り返されます。

即時実行しないバージョン:immediate が false の場合、最初のクリックは実行されません。待機時間が経過した後に有効になります。つまり、何回クリックしても、最後のクリックイベントのみが実行されます。

原理：

setTimeout を使用してイベントの実行を遅らせます。複数回トリガーされた場合は、最後に実行されたコードを clearTimeout してタイミングを再開します。タイミング中にイベントがトリガーされない場合は、対象コードを実行します。