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

1. 防抖（Debouncing）：

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

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

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

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

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

區(qū)別：

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

如何實(shí)現(xiàn)：

防抖實(shí)現(xiàn)：

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

節(jié)流實(shí)現(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é)流的時(shí)間間隔。調(diào)用debounce或throttle函數(shù)并傳入事件處理函數(shù)和時(shí)間間隔，返回一個(gè)新的函數(shù)，用于包裹原事件處理函數(shù)。

防抖的使用場景：

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

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

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