【前端工程師手冊】30分鐘看懂函數防抖和節流

防抖和節流

假若有一個飲水機，規定按下按鈕以後2秒後開始出水，有個閒得x疼的人很快的按按鈕10秒，飲水機會做何反應呢？

防抖（debounce）：在按下按鈕和出水的這2秒內若是還有人按按鈕，飲水機會從新開始計算2秒，也就是說老是以最新的操做爲基準來計算時間


節流：即便被人不間斷的按按鈕了10秒鐘，可是飲水機依然不緊不慢的2s出一次水，也就是說無論外部操做的多快，飲水機總會有本身的頻率

代碼實現

防抖

function debounce(func, delay) {
    var timer;
    return function() {
        clearTimeout(timeout);
        timer = setTimeout(function(){
          func();
        },delay)
    };
};

節流

function throttle(fn, threshhold) {
 var timer
 var start = Date.now();
 return function () {

    var curr = Date.now();
 
    clearTimeout(timer)
    if(curr - start >= threshhold){ 
        fn()
        start = curr
    }else{
        timer = setTimeout(function(){
            fn() 
        }, threshhold);
    }
  }
}

說一個神器：可視化的防抖和節流，以動畫的形式看到二者的區別

使用場景

防抖：頻繁操做可是隻須要響應最後一次便可

• 輸入框驗證，只須要對最後一次輸入事件做出驗證便可
• resize事件
• ...

節流：調節頻率，以必定的頻率去響應

• 搜索聯想
• 響應拖拽
• ...