Snippet - Debounce and Throttle

Debounce（去抖動）是讓一個函式在連續被觸發時只執行最後一次的函式

Implement debounce

// 接受兩個參數:要執行的函式 callback 和要延遲的時間 delay
function debounce(callback, delay) {
  let timer;
  //debounce 最後會回傳一個function
  return function (...args) {
    // 每一次 debounce function 被觸發時，會先清除之前的 timer，避免觸發先前的 callback 函式
    // 因此只要在 delay 時間內觸發 debounce function，就會一直清除先前的 timer，避免 callback 一直被執行
    if (timer) {
      clearTimeout(timer);
    }
    // 清除之後，再重新計時
    // 當 delay 時間到時，執行 callback
    timer = setTimeout(() => {
      callback.apply(this, args);
    }, delay);
  };
}

const debounceHandle = debounce(handler, 300);

window.addEventListener("mousemove", debounceHandle);

Implement throttle

throttle 可以控制函式調用頻率，確保函式在指定的時間內最多執行一次 常見使用情境像是滾動頁面的監聽

// 接受兩個參數:要執行的函式 callback 和要延遲的時間 delay
function throttle(callback, delay = 500) {
  let timer = null;

  // throttle 會回傳一個函式
  return (...args) => {
    // 如果有計時器，表示還在 delay 的秒數內，則直接 return，不往下執行程式碼
    if (timer) return;

    // 如果沒有計時器，則表示已經到達 delay 的秒數
    // 設定計時器，在 delay 秒數之後，會執行回調函式 fn，並將計時器值為改為 null
    timer = setTimeout(() => {
      callback(...args);
      timer = null;
    }, delay);
  };
}

const throttledScroll = throttle(scrollHandler, 300);

// 綁定滾動事件處理程序，確保 scrollHandler 最多每 300 毫秒執行一次
window.addEventListener("scroll", throttledScroll);