JS簡單實現防抖和節流

亖巠發表於2018-07-30
JS

一、什麼是防抖和節流

Ps: 比如搜尋框，使用者在輸入的時候使用change事件去呼叫搜尋，如果使用者每一次輸入都去搜尋的話，那得消耗多大的伺服器資源，即使你的伺服器資源很強大，也不帶這麼玩的。

1. 防抖 - debounce

其中一種解決方案就是每次使用者停止輸入後，延遲超過500ms時，才去搜尋此時的String，這就是防抖。

  • 原理：將若干個函式呼叫合成為一次，並在給定時間過去之後僅被呼叫一次。
  • 程式碼實現：
function debounce(fn, delay) {
  // 維護一個 timer，用來記錄當前執行函式狀態
  let timer = null;

  return function() {
    // 通過 ‘this’ 和 ‘arguments’ 獲取函式的作用域和變數
    let context = this;
    let args = arguments;
    // 清理掉正在執行的函式，並重新執行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 記錄當前函式呼叫次數
// 當使用者滾動時被呼叫的函式
function foo() {
  flag++;
  console.log('Number of calls: %d', flag);
}

// 在 debounce 中包裝我們的函式，過 2 秒觸發一次
document.body.addEventListener('scroll', debounce(foo, 2000));
複製程式碼
  1. debounce函式封裝後，返回內部函式
  2. 每一次事件被觸發，都會清除當前的timer然後重新設定超時並呼叫。這會導致每一次高頻事件都會取消前一次的超時呼叫，導致事件處理程式不能被觸發
  3. 只有當高頻事件停止，最後一次事件觸發的超時呼叫才能在delay時間後執行

2. 節流 - throttle

另一種解決方案比 防抖 要寬鬆些，這時我們不想使用者一味的輸入，而是給使用者一些搜尋提示，所以在當中限制每過500ms就查詢一次此時的String，這就是節流。

  • 原理：節流函式不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式。
  • 程式碼實現有兩種，一種是時間戳，另一種是定時器 1）時間戳實現：
function throttle(func, delay){
  let prev = Date.now();
  return function(){
    const context = this;
    const args    = arguments;
    const now     = Date.now();
    if(now - prev >= delay){
      func.apply(context, args);
      prev = Date.now();
    }
  }
}
複製程式碼

當高頻事件觸發時，第一次應該會立即執行（給事件繫結函式與真正觸發事件的間隔如果大於delay的話），而後再怎麼頻繁觸發事件，也都是會每delay秒才執行一次。而當最後一次事件觸發完畢後，事件也不會再被執行了。

2）定時器實現： 當觸發事件的時候，我們設定一個定時器，再觸發事件的時候，如果定時器存在，就不執行；直到delay秒後，定時器執行執行函式，清空定時器，這樣就可以設定下個定時器。

fucntion throttle(func, delay){
  let timer = null;

  return funtion(){
    let context = this;
    let args    = arguments;
    if(!timer){
      timer = setTimeout(function(){
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}
複製程式碼

當第一次觸發事件時，肯定不會立即執行函式，而是在delay秒後才執行。 之後連續不斷觸發事件，也會每delay秒執行一次。 當最後一次停止觸發後，由於定時器的delay延遲，可能還會執行一次函式。

3）綜合使用時間戳與定時器，完成一個事件觸發時立即執行，觸發完畢還能執行一次的節流函式

function throttle(func, delay){
  let timer = null;
  let startTime = Date.now();

  return function(){
    let curTime = Date.now();
    let remaining = delay - (curTime - startTime);
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    if(remaining <= 0){
      func.apply(context,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(func, remaining);
    }
  }
}
複製程式碼

需要在每個delay時間中一定會執行一次函式，因此在節流函式內部使用開始時間、當前時間與delay來計算remaining，當remaining <= 0時表示該執行函式了，如果還沒到時間的話就設定在remaining時間後再觸發。當然在remaining這段時間中如果又一次發生事件，那麼會取消當前的計時器，並重新計算一個remaining來判斷當前狀態。

相關文章