前言

フロントエンドプロジェクトでは、関数の振れ防止とスロットルは、合格したフロントエンドエンジニアとして身につけなければならない知識であるはずです.

関数のブレ止めと絞りは何ですか

関数の振れ止め:イベントが一定の期間終了すると、対応する関数

が実行されます.

関数のスロットル:イベント実行中に対応する関数

が一定時間毎に実行される.

関数のブレ防止と节约の违いは私から见ると、生活の中で宅配便と出前の违いは少し似ています:宅配便:一日の中でどんな时间の下の単は普通夜に出荷します(固定时间の长い)出前:注文后の食事ができた后(一定时间ごとに)すぐに食事を送ります

なぜブレ止めとスロットルを身につけるのか

関数スロットル(throttle)と関数ジッタ防止(debounce)はいずれも関数の実行頻度を制限することができ、異なるシーンに基づいて実行頻度を制限し、関数のトリガ頻度が高すぎることによる応答速度がトリガ周波数に追いつかず、遅延、仮死、カートンの現象が発生することを回避した.

関数のジッタ防止とスロットル応用例と実現

ブレ止めの応用1.ジッタ防止は一般的に検索フィルタ機能に多く適用され、検索ボックスの変化を傍受して検索するだけでは検索の頻度が高すぎてページジッタを招きます.そのため、最後の(中間一時停止のいずれかかもしれない)間隔を0.5秒間隔で入力して検索を実行するまで検索回数を制限する必要があり、検索の頻度を制御することができます.2.フォームの再発行3.ローリングリフレッシュインスタンスコード1:

   var timer = null
   function debounce(fn,time){
        //      500ms          
        clearTimeout(time)
        setTimeout(function(){
            console.log('====  =====')
            fn()
        },time)
   }
   //    input change  
   element.addEventListener("input", function(event) {
    debounce(searchFunc,500)
   })
   //  
   searchFunc(){
       console.log('====serch=====')
   }

インスタンスコード2-閉パッケージ実装:

//   

節流の応用1.canvasブラシ機能2.ページ要素のドラッグアンドドロップインスタンスコード1:

var startTime = 0
function throttle(fn,time){
    let nowTime = (new Date()).valueOf()
    if(nowTime-startTime > time){
        fn()
        startTime = nowTime
    }
}

document.addEventListener("mousemove",function(){
  //  1     drag
   throttle(drag(),1000)
});
function drag(){
   console.log('=====  =====')
}

インスタンスコード2-閉パッケージ実装:

//   

まとめ

ページ負荷が比較的大きい場合、ブラウザメモリの消費量をどのように減らすかは、フロントエンドの最適化に考慮する必要があります.ジッタとスロットルの概念はブラウザのメモリの消費を大幅に節約することができるので、ジッタとスロットルをマスターすることはフロントエンドの必須スキルの一つです.