JavaScript防抖與節(jié)流怎樣處理高頻事件

在 JavaScript 中，高頻事件指的是頻繁觸發(fā)的事件，例如滾動、輸入、鼠標(biāo)移動等。為了提高性能并避免因事件處理程序執(zhí)行時間過長而導(dǎo)致的卡頓或瀏覽器無響應(yīng)，我們可以使用防抖（debounce）和節(jié)流（throttle）兩種技術(shù)。

1. 防抖（debounce）： 防抖的基本思想是在事件被觸發(fā)后 n 秒內(nèi)函數(shù)只執(zhí)行一次。如果在這 n 秒內(nèi)又被重新觸發(fā)，則重新計時。適用于如輸入框?qū)崟r搜索、表單驗證等場景。

以下是一個簡單的防抖函數(shù)實現(xiàn)：

function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

使用示例：

const handleScroll = debounce(function () {
  console.log('滾動事件觸發(fā)');
}, 200);

window.addEventListener('scroll', handleScroll);

2. 節(jié)流（throttle）： 節(jié)流的基本思想是在固定的時間間隔內(nèi)執(zhí)行一次事件處理函數(shù)。適用于如滾動加載、鼠標(biāo)移動拖拽等場景。

以下是一個簡單的節(jié)流函數(shù)實現(xiàn)：

function throttle(func, interval) {
  let lastExecution = 0;
  return function () {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastExecution >= interval) {
      lastExecution = now;
      func.apply(context, args);
    }
  };
}

使用示例：

const handleScroll = throttle(function () {
  console.log('滾動事件觸發(fā)');
}, 200);

window.addEventListener('scroll', handleScroll);

總結(jié)：

• 防抖更適合于需要等待用戶停止操作后再執(zhí)行的場景，如搜索建議。
• 節(jié)流更適合于需要按照固定頻率執(zhí)行的場景，如滾動加載圖片。

根據(jù)實際需求選擇合適的策略來處理高頻事件，可以有效提升應(yīng)用的性能和用戶體驗。