The debounce & throttle in Javascript（防抖與節流）

---

歡迎star和watch個人github issue blog，歡迎加入討論。
您的支持是我最大的動力，我會保證提供高質與清晰的文章與您共同成長。

---

節流[throttle]與防抖[debounce]在前端領域常常涉及，下面咱們會嘗試解釋其中的原理與差別與實現以及一些應用場景

common sense

• 隨着應用與需求複雜度不斷上升，節流與防抖也出現了一些相同的設置其中一點就是能夠選擇觸發的leading和trailing（前置或後置）或both。
• 一些文章中的immediate option與上面所談到的設置leading: true相似。

debounce

debounce: Debounce technique allows us to "group" multiple sequential calls in a single one.
防抖： 防抖技術容許咱們捆綁 多個連續調用成爲單一的一次調用。

可簡單的理解防抖是將一次調用發生時的先後時間（TIMING）斷內不容許再次觸發，若屢次觸發則方法的真實調用根據設置能夠在：

• 第一次觸發時（leading）--- 這將致使後續連續的觸發再也不發生
• 最後一次觸後間隔至少一個TIMING內沒有被再次觸發時調用（trailing）
• Both

例如當設置leading: true且 TIME = 400ms

防抖的實現：

/**
   * 返回一個函數，只要它一直被觸發將不會被調用
   * 函數將在其再也不被觸發的N毫秒後調用，若是immediate被傳入那麼
   * 函數將在第一次觸發是當即調用
   * 
   */

// es6 syntax import & export
export function deBounce(func, delay, immediate) {
    let timeout;

    return function executedFunction() {
      const context = this;
      const args = arguments;

      var later = function() {
        timeout = null;
        if(!immediate) func.apply(context, args);
      }

      const callNow = immediate && !timeout;

      clearTimeout(timeout);

      timeout = setTimeout(later, delay);

      if (callNow) func.apply(context, args);
    }
  }

// 這是其中的一種實現關於leading與trailing可自行調整immediate。

防抖的應用

這個簡單的舉個🌰： 在autocomplete中keypress事件與ajax配合使用可減小沒必要要的請求,能夠參考Corbacho所做的demo.

throttle

throttle: Throttle technique don't allow us to execute our function more than once every X milliseconds.
節流： 節流技術是咱們不能在X毫秒內觸發第二次函數調用。

簡單的理解節流就像控制水龍頭單位時間內的出水量同樣，在一個設定時間段內只能觸發一次調用。若在一個時間段內連續觸發屢次函數真實調用根據設置能夠在：

• 這個時間段的開頭（leading）
• 這個時間段的結尾（trailing）
• Both

例如當設置leading: true且 TIME = 400ms

可見第一段中我一直在觸發函數但正式但函數調用是在調用後但400ms後再次調用，在看第二段在首次觸發後我在接着但300和400ms均勻觸發函數可是後面再也不觸發致使函數沒有方式第二次調用...

節流的實現

/**
  * 簡單作法，leading
  */
  export function throttle(fn, limit) {  
    let delay = false
    return (...args) => {
      if (!delay) {
        fn.apply(this, args)
        delay = true
        setTimeout(() => {
          delay = false
        }, limit)
      }
    }
  }

節流的應用

我的看過一個比較有趣的例子是使用節流實現無限下拉，使用節流控制是保證用戶在獲取新內容能夠即便但又不會過於頻繁， demo在此。

注： 後續我會補充常見庫的實現與異同，以及新API requestAnimationFrame