JS優化經常使用片段

防抖debounce裝飾器

在事件被觸發n秒後再執行回調，若是在這n秒內又被觸發，則從新計時。

function debounce(func, delay) {
  let isCooldown = false;
  return function() {
    if (isCooldown) return;
    func.apply(this, arguments);
    isCooldown = true;
    setTimeout(() => isCooldown = false, delay);
  };
}

 

節流throttle裝飾器

規定在一個單位時間內，只能觸發一次函數。若是這個單位時間內觸發屢次函數，只有一次生效。

function throttle(func, delay) {

  let isThrottled = false,
    savedArgs,
    savedThis;

  function wrapper() {

    if (isThrottled) { // (2)
      savedArgs = arguments;
      savedThis = this;
      return;
    }

    func.apply(this, arguments); // (1)

    isThrottled = true;

    setTimeout(function() {
      isThrottled = false; // (3)
      if (savedArgs) {
        wrapper.apply(savedThis, savedArgs);
        savedArgs = savedThis = null;
      }
    }, delay);
  }

  return wrapper;
}

2者區別：

• 函數防抖和函數節流都是防止某一時間頻繁觸發，可是這兩兄弟之間的原理卻不同。
• 函數防抖是某一段時間內只執行一次，而函數節流是間隔時間執行。

應用場景：

• debounce
  • 　　search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源。
  • 　　window觸發resize的時候，不斷的調整瀏覽器窗口大小會不斷的觸發這個事件，用防抖來讓其只觸發一次。
• throttle
  • 　　鼠標不斷點擊觸發，mousedown(單位時間內只觸發一次)。
  • 　　監聽滾動事件，好比是否滑到底部自動加載更多，用throttle來判斷。

參考文檔：

裝飾和轉發，call/apply

7分鐘理解JS的節流、防抖及使用場景