[前端小知識] Debounce防抖 & Throttle節流

與它們的初次見面是在進行效能調校的時候，說來也是慚愧，早就該懂的東西卻拖到效能瓶頸時才知道……

懶人包

兩者都是為了要減輕短時間內不停呼叫同個函式所造成的效能負擔，但在執行頻率上還是略有不同。

Debounce 防抖

• 只有在最後一次被呼叫的n秒後才會執行一次
• 使用情境：autocomplete、滑鼠移動、ajax、…等

Throttle 節流

• 保障函式一定會間隔至少n秒才會再度被執行，（也就是在n秒內的重複呼叫不會被執行）
• 使用情境：防止按鈕被不停點擊、捲動頁面觸發的動畫…等與畫面相關的

細談兩種方式都可以的情境

是我認為兩種都可以使用，但實際上還是會根據需求去做變化的

• 拖曳以變更視窗大小：Debounce的resize體感上會比較沒那麼平順，會比較有破版的感覺；而Throttle則是相較頻繁進行resize，所以體感上的畫面變動會比較滑順
• 資料驗證：如果是想要在使用者輸入完在一口氣進行一次驗證的話，使用的是Debounce；另一方面，如果是想要在使用者邊輸入就邊進行驗證的話，使用的是Throttle

詳細說明一下程式實作面的想法

Debounce 防抖

在呼叫函式後，會一直刷新計時器且不會實際執行函式，而是直到最後一次呼叫的n秒後才會真的被執行一次

const debounceFunc = (cb, delay = 500) => {
  let timer = null;

  return (...args) => {

    if(timer){
      clearTimeout(timer);
    }

    timer = setTimeout(function () {
      cb(...args)
    }, delay);

  }
}

Throttle 節流

在呼叫函式時會先根據最後一次執行函式的時間+n秒，去判斷現在是否可執行該函式，如還未超過該加總時間的話，將會繼續等到下一次的判斷

某種層面來說，如果短時間內不停的觸發函式，那在感受上會覺得很像是每n秒執行一次函式

const throttleFunc = (cb, threshold) => {
  let lastExcuteTime = 0, timer = null;

  return (...args) => {
    const nowTime = Date.now();

    if((nowTime - lastExcuteTime) > threshold) {
      cb(...args);
      lastExcuteTime = nowTime;
    }
  }
}

為了怕哪天老了記憶力衰退，先把它記起來以後比較好找

以上就是 Debounce防抖 & Throttle節流 的筆記內容，有任何問題和建議都歡迎互相交流喔！