防抖和節流在平時開發過程中用到還是很多的，兩種常用的優化前端性能的技術。所以平時的面試過程中也可能會被問到。防抖和節流用于限制事件的觸發頻率，防止事件處理函數過于頻繁地執行，從而提高頁面性能和用戶體驗。

1. 防抖（Debouncing）：

防抖是指在事件被觸發后，等待一定的時間間隔（如1000毫秒），如果在這個時間間隔內沒有再次觸發該事件，那么就執行事件處理函數；如果在這個時間間隔內再次觸發了該事件，則重新等待一定的時間間隔。

防抖適用于需要等待一段時間后執行事件處理函數的情況，如搜索框輸入時的自動搜索。

2. 節流（Throttling）：

節流是指在一定的時間間隔內，只允許事件處理函數執行一次。即如果在這個時間間隔內多次觸發了該事件，只有第一次觸發會執行事件處理函數，其他的觸發會被忽略。

節流適用于需要控制事件觸發頻率的情況，如頁面滾動時的懶加載圖片。

區別：

• 時間點不同： 防抖是在最后一次觸發事件后等待一段時間后執行事件處理函數；而節流是在一定的時間間隔內執行事件處理函數。
• 執行頻率不同： 防抖在事件頻繁觸發時，只會執行一次事件處理函數；而節流在一定的時間間隔內會執行多次事件處理函數，但是每次執行的時間間隔是固定的。

如何實現：

防抖實現：

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

節流實現：

function throttle(func, delay) {
  let canRun = true;
  return function(...args) {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      func.apply(this, args);
      canRun = true;
    }, delay);
  };
}

在以上代碼中，func是要執行的函數，delay是防抖或節流的時間間隔。調用debounce或throttle函數并傳入事件處理函數和時間間隔，返回一個新的函數，用于包裹原事件處理函數。

防抖的使用場景：

1. 搜索框輸入： 當用戶在搜索框中輸入內容時，不希望每輸入一個字母就立即觸發搜索請求，而是希望等待用戶停止輸入一段時間后再觸發搜索請求，以減少請求次數和提升用戶體驗。
2. 窗口調整： 當窗口大小調整時，可能會觸發resize事件，但頻繁調整窗口大小時，可能會導致頁面性能下降。使用防抖技術可以確保只有在用戶停止調整窗口大小后才執行相關處理邏輯。
3. 提交按鈕點擊： 當用戶點擊提交按鈕時，可能會觸發多次點擊事件，而服務器端處理請求可能需要一定時間。使用防抖可以確保只有在用戶停止點擊按鈕一段時間后才真正提交請求。

節流的使用場景：

1. 頁面滾動： 當用戶滾動頁面時，可能會觸發scroll事件，但頁面滾動時頻繁觸發事件處理函數可能會導致頁面卡頓。使用節流技術可以限制事件處理函數的執行頻率，以提升頁面性能。
2. 鼠標移動： 當用戶移動鼠標時，可能會觸發mousemove事件，但頻繁觸發事件處理函數可能會導致頁面性能下降。使用節流技術可以確保只有在一定時間間隔內執行事件處理函數。
3. 按鈕點擊： 當用戶點擊按鈕時，可能會觸發多次點擊事件，而按鈕點擊事件處理函數可能需要一定時間。使用節流可以確保在一定時間間隔內只執行一次點擊事件處理函數，以避免多次觸發。