JavaScript における手ぶれ補正とスロットリングとは何ですか

JavaScript では、アンチシェイクとは、高頻度イベントがトリガーされてから n 秒以内に関数が 1 回だけ実行されることを意味します。高頻度イベントが n 秒以内に再度トリガーされた場合、時間は再計算; スロットリングとは、高頻度のイベントが継続する場合にイベントがトリガーされると、イベント処理関数が一定期間内に 1 回だけ呼び出されることが保証されることを意味します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

1. アンチシェイク

関数は、高周波イベントがトリガーされてから n 秒以内に 1 回だけ実行されます。イベントは n 秒以内に再度トリガーされ、時間を再計算します

• アイデア:
  アクション バインディング イベント、アクションの発生後、一定の時間が経過するとイベントがトリガーされます。期間、アクションが再度発生した場合は、再度待機します。イベントは、一定の時間が経過した後に再びトリガーされます。

function debounce(fn) {
      let timeout = null; // 创建一个标记用来存放定时器的返回值
      return function () {
        clearTimeout(timeout);
         // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { 
        // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内
        // 如果还有字符输入的话，就不会执行 fn 函数
          fn.apply(this, arguments);
          //因为sayHi函数是在全局中运行，this默认指向了window
          //所以要用apply将inp的this传入
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

たとえば、ユーザーが入力ボックスに文字列を入力した後、ajax リクエストが自動的に送信されるという要件がある場合、手ぶれ補正が行われていない場合、ユーザーは(文字の削除や新しい文字の入力) はリクエストを送信しますが、手ぶれ補正処理が実行されている場合、ユーザーが文字を入力した後、0.5 秒経過しても文字列は変更されません (これはおそらく、文字列が変更されないことを意味します)ユーザーが文字列の入力を完了した場合)、リクエストを送信します。文字列が 0.5 秒以内に変更された場合 (これは、現在の文字列がユーザーが入力する最後の文字列ではないことを示す可能性が高くなります)、リクエストは一時的に送信されず、ユーザーが 0.5 秒以上一時停止するまで、リクエストは 0.5 秒間再計算され続け、その後リクエストを送信します。

2. スロットリング

イベントが継続的にトリガーされる場合は、イベント処理関数が一定期間内に 1 回だけ呼び出されるようにしてください。したがって、スロットリングにより、関数

• アイデア:
  アクション バインディング イベントの実行頻度が減ります。このイベントは、アクションが発生してから一定期間後にトリガーされます。アクションが再度発生した場合、そのアクションは無視され、イベントが実行されるまで再トリガーできません。

function throttle(fn) {
      let canRun = true; // 通过闭包保存一个标记
      return function () {
        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
        canRun = false; // 立即设置为false
        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次
          //循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

3. アプリケーション シナリオの組み合わせ

デバウンス (アンチシェイク)

• # 検索 検索 Lenovo では、ユーザーが値を入力し続けると、要求リソースを節約するために手ぶれ補正が使用されます。

• #ウィンドウ トリガーのサイズ変更時に、ブラウザー ウィンドウのサイズを常に調整すると、このイベントが継続的にトリガーされます。手ぶれ補正を使用して、一度だけトリガーされるようにしてください。

.

throttle(スロットル)

• マウスの連続クリック、マウスダウンによってトリガー (単位時間あたり 1 回のみトリガー)

# #一番下にスライドして自動的にさらに読み込むかどうかなどのスクロール イベントをリッスンし、スロットルを使用して判断します
[推奨学習:

JavaScript 上級チュートリアル

]

以上がJavaScript における手ぶれ補正とスロットリングとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。