溫馨提示×

JavaScript中如何進(jìn)行事件的節(jié)流與防抖

小樊
81
2024-10-27 07:57:00
欄目: 編程語言

在 JavaScript 中，事件節(jié)流（throttle）和防抖（debounce）是兩種常用的優(yōu)化高頻率觸發(fā)事件的技術(shù)。它們都可以用來控制函數(shù)的執(zhí)行頻率，從而提高性能。

1. 事件節(jié)流 (Throttle)

事件節(jié)流函數(shù)會在一定時間內(nèi)只執(zhí)行一次目標(biāo)函數(shù)。如果在等待期間再次觸發(fā)事件，那么重新計時。以下是一個簡單的節(jié)流函數(shù)實現(xiàn)：

function throttle(func, delay) {
  let lastCall = 0;

  return function (...args) {
    const now = Date.now();

    if (now - lastCall < delay) {
      return;
    }

    lastCall = now;
    return func(...args);
  };
}

使用示例：

const throttledFunction = throttle(() => {
  console.log('Throttled function triggered');
}, 300);

window.addEventListener('scroll', throttledFunction);

2. 事件防抖 (Debounce)

事件防抖函數(shù)會在一定時間內(nèi)只執(zhí)行一次目標(biāo)函數(shù)，如果在等待期間再次觸發(fā)事件，那么重新計時。防抖的主要應(yīng)用場景是在用戶停止操作后執(zhí)行一次。以下是一個簡單的防抖函數(shù)實現(xiàn)：

function debounce(func, delay) {
  let timeout;

  return function (...args) {
    const later = () => {
      timeout = null;
      func(...args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, delay);
  };
}

使用示例：

const debouncedFunction = debounce(() => {
  console.log('Debounced function triggered');
}, 300);

window.addEventListener('scroll', debouncedFunction);

總結(jié)：

  • 事件節(jié)流 (Throttle)：確保一定時間內(nèi)只執(zhí)行一次目標(biāo)函數(shù)，適用于高頻率觸發(fā)的事件，例如滾動、輸入等。
  • 事件防抖 (Debounce)：確保在一定時間間隔內(nèi)只執(zhí)行一次目標(biāo)函數(shù)，適用于用戶停止操作后需要執(zhí)行的事件，例如搜索建議、窗口大小調(diào)整等。

0 踩