# throttle 和 debounce
throttle 和 debounce 都是 JavaScript 中的常用技術，用於對函數的調用進行限制。它們的主要用途是在網站或應用程序中防止過度調用函數，例如防止過於頻繁地發送網絡請求或更新界面。

雖然它們的目的都相同，但他們兩者之間還是有區別:

## **throttle:**
是一種用於限制函數調用的技術，通常用於對函數的連續調用進行限制，以確保在一段特定的時間內最多只調用一次。

舉例來說，你可以使用 throttle 函數來限制用戶對某個按鈕的頻繁點擊。

function throttle(func, delay) {
    /** 紀錄上次調用的時間 */
    let lastCall = 0;
    /** 返回一個匿名函數，每次被調用的時候執行 */
    return function(...args) {
        const now = Date.now();
        /** 檢查當前時間和上次調用時間的差值是否小於延遲的時間 */
        if (now - lastCall < delay) {
            return; // 如果是就返回不執行
        }
        // 不是的話就更新lastCall 並調用原始func方法
        lastCall = now; 
        func(...args);
    };
}
/** 按鈕使用 */
const button = document.getElementById("my-button");
button.addEventListener("click", throttle(() => {
  console.log("Button clicked!");
}, 1000));

## debounce

通常用於對函數的單次調用進行限制，以確保在一段特定的時間內函數最多被調用一次。例如:使用 debounce 函數來限制一個函數在輸入框中輸入文本時每秒最多調用一次

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

在這個示例中，debounce 函數使用 JavaScript 中的 setTimeout 函數來延遲函數的調用。如果在延遲期間再次調用函數，則會使用 clearTimeout 函數清除原來的計時器，並重新設置新的計時器。