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

1. 防抖（Debouncing）：

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

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

2. 節(jié)流（Throttling）：

節(jié)流是指在一定的時間間隔內(nèi)，只允許事件處理函數(shù)執(zhí)行一次。即如果在這個時間間隔內(nèi)多次觸發(fā)了該事件，只有第一次觸發(fā)會執(zhí)行事件處理函數(shù)，其他的觸發(fā)會被忽略。

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

區(qū)別：

• 時間點不同： 防抖是在最后一次觸發(fā)事件后等待一段時間后執(zhí)行事件處理函數(shù)；而節(jié)流是在一定的時間間隔內(nèi)執(zhí)行事件處理函數(shù)。
• 執(zhí)行頻率不同： 防抖在事件頻繁觸發(fā)時，只會執(zhí)行一次事件處理函數(shù)；而節(jié)流在一定的時間間隔內(nèi)會執(zhí)行多次事件處理函數(shù)，但是每次執(zhí)行的時間間隔是固定的。

如何實現(xiàn)：

防抖實現(xiàn)：

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

節(jié)流實現(xiàn)：

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

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

防抖的使用場景：

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

節(jié)流的使用場景：

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