JavaScript 関数のスロットリングと手ぶれ補正のアプリケーション シナリオの紹介

この記事は、PHP 変数スコープ (コード) の使用法を紹介します。必要な方は参考にしていただければ幸いです。

throttle Throttle

イベントはトリガーされ、1 回だけ実行されます。

アプリケーション シナリオ

マウスの移動など、mousemove イベントがトリガーされたとき。

キーアップ イベントをトリガーする状況 (検索など)。

たとえば、スクロール イベントがトリガーされると、マウスの下スクロールが停止するとデータの読み込みがトリガーされます。

コーディング

方法 1 アンチシェイク

// function resizehandler(fn, delay){
//   clearTimeout(fn.timer);
//   fn.timer = setTimeout(() => {
//      fn();
//   }, delay);
// }
// window.onresize = () => resizehandler(fn, 1000);

方法 2 クロージャ アンチシェイク

function resizehandler(fn, delay){
    let timer = null;
    return function() {
      const context = this;
      const args=arguments;
      clearTimeout(timer);
      timer = setTimeout(() => {
         fn.apply(context,args);
      }, delay);
    }
 }
 window.onresize = resizehandler(fn, 1000);

デバウンス アンチshake

イベントがトリガーされた後、特定のイベント内で 1 回実行します。

アプリケーション シナリオ

ウィンドウの変更によってトリガーされるサイズ変更イベントは 1 回だけ実行されます。

電話番号の入力を確認するには、入力を中止して一度実行してください。

コーディング

function resizehandler(fn, delay, duration) {
        let timer = null;
        let beginTime = +new Date();
        return function() {
          const context = this;
          const args = arguments;
          const currentTime = +new Date();
          timer && clearTimeout(timer);
          if ((currentTime - beginTime) >= duration) {
            fn.call(context, args);
            beginTime = currentTime;
           } else {
             timer = setTimeout(() => {
               fn.call(context, args)
             }, delay);
           }
        }
      }

        window.onresize = resizehandler(fn, 1000, 1000);

以上がJavaScript 関数のスロットリングと手ぶれ補正のアプリケーション シナリオの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。