函數節流和函數去抖

在日常的開發過程中，會有這樣的場景，事件被頻繁的觸發，比如說我們的在輸入的時候監控keypress事件，在頁面滾動的時候監控頁面的滾動事件。比如我們監控頁面的resize事件，拉動窗口改變大小的時候，resize事件被頻繁的執行

事件處理函數簡單的話還好，但是如果是復雜的dom操作，可能會導致整個UI卡頓設置瀏覽器奔潰，而我們往往的結果就是事件結束后處理函數執行一次就行了。於是我們可以通過函數的去抖來處理

去抖（debounce）

函數調用n秒后才會執行，如果函數在n秒內被調用的話則函數不執行，重新計算執行時間

 

實現代碼

  /**函數的去抖動**/
 function debounce(method,delay){
      var timer=null;
       return function(){
            var context=this, args=arguments;
            clearTimeout(timer);
            timer=setTimeout(function(){
                method.apply(context,args);
            },delay);
        }
}

 測試：

function resizehandler(){
      console.log(++n);
}
 window.onresize=debounce(resizehandler,500);

 

測試結果：

 

函數去抖是在我們事件結束后的一段時間內才會執行，會有一個延遲性。現在我們有一個需求，有一個輸入框要求輸入聯想，在用戶輸入的過程中，需要按照一定的時間像后台發送ajax請求，獲取數據。對於這樣的需求，我們可以通過函數節流來實現

 

函數節流（throttle）

函數預先設定一個執行周期，當調用動作的時刻大於等於執行周期則執行該動作，然后進入下一個新周期

實現代碼

/**函數節流**/

function throttle(method,duration){
        var  begin=new Date();
        return function(){
            var context=this, args=arguments, current=new Date();
            if(current-begin>=duration){
                 method.apply(context,args);
                 begin=current;
            }
        }
}

 

測試：

function resizehandler(){
    console.log(++n);
}
window.onresize=throttle(resizehandler,500);

 

結果：

 

需要注意的一點：函數的節流和函數的去抖都是通過減少實際邏輯處理過程的執行來提高事件處理函數運行性能的手段，並沒有實質上減少事件的觸發次數。