JSの関数節流とブレ止めを学ぶ

最近頻繁にブラウザウィンドウで使用されるresizeイベントとページのスクロールイベント(scroll)、私达はすべてこれらの事件が频繁にコールバック関数を呼び出すことを知っていて、もしコールバック関数の中でただいくつかの简単なデータの処理をするだけならば、悪いのはここでいくつかDOMの操作を行うことができてあるいは要求を出してバックグラウンドとインタラクティブに行って、频繁にページのカートンを触発して、使用に影响します.この状況を改善する.どちらを具体的に使うかについては、両者の違いと使用シーンをよく分析してみましょう.関数スロットルとジッタ防止は、イベントと関数実行の間に制御層を追加しているため、DOMイベントがトリガーする周波数を制御することはできませんが、関数実行の周波数を制御することができます.
かんすうしぼり
地下鉄の駅がラッシュアワーに通路を縮小して人の流れを制御するように、人を入れないのではなく、入るのが遅いのではないでしょうか.そうしないと、呼んでも押し寄せてしまいます.地下鉄は耐えられませんね.そこで、前回実行した時点と今回実行した時点を比較します.

function throttle(fn, threshold) {
        let startTime = new Date(); //       
        let currentTime; //       
        let timerId;
        threshold = threshold || 200; //   200ms

        return function(...rest) {
          currentTime = new Date();

          if (currentTime - startTime >= threshold) { //          threshhold，     
            fn.apply(this, rest);
            startTime = currentTime;
          } else { //           ，      ，             
            clearTimeout(timerId);
            timerId = setTimeout(() => {
              fn.apply(this, rest);
            }, threshold)
          }
        }
      }

適用シーン:
比較はresize、scroll、mousemoveなどのマウススライドイベントでよく使用され、throttleは関数を一定の速度で強制します.アニメーション関連のシーンに適しています.
関数ジッタ防止
これはエレベーターの例を結びつけて理解することができて、もし誰かがずっとエレベーターを押しているならば、エレベーターは歩けないで、最後に誰も押していないだけで、エレベーターは歩きます.関数ジッタ防止とは,複数回の関数呼び出しを1回に統合し,ユーザの操作が完了した後に呼び出すことである.操作が完了した後に呼び出すことをどのように保証しますか?私たちは関数をタイマーの中に置いて、呼び出すたびにタイマーをクリアして、このように操作する時にタイマーをトリガーしないことを保証することができます.

function debounce(func, delay) {
        return function(...rest) {
          clearTimeout(func.timerId);
          func.timerId = setTimeout(() => {
            func.apply(this, rest)
          }, delay);
        }
      }

適用シーン

input入力検証または入力内容に基づいてバックグラウンドにデータを要求する場合

.

確定ボタンをクリックして結果を提出するとき

requestAnimationFrame
lodash実装を見ているとこの方法を発見し、その使い方を調べてみました.window.requestAnimationFrame()メソッドは、ブラウザにアニメーションを実行し、次に再描画する前に指定した関数を呼び出してアニメーションを更新するように要求することを示します.---MDN
RAFはアニメーションの作成によく使われ、ページのフレームを正確に制御してレンダリングをリフレッシュし、アニメーションをよりスムーズにします.RAFが呼び出される頻度は毎秒60回、約16.7 ms/回であり、スロットル効果を実現するためにも利用できます.

throttle(fn,16.7)

ブラウザによってサポートされるrequestAnimationFrame接頭辞は異なります.

window.requestAnimFrame =(function(callback){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback){window.setTimeout(callback,1000/60);};})();

IEブラウザIE 10以上のバージョンのサポート