快捷導(dǎo)航

在JavaScript中實現(xiàn)防抖和節(jié)流的方法詳解

更新時間：2026年03月26日 08:56:13 作者：用戶975147075136

文章介紹了防抖和節(jié)流的基本原理,提供了最常用的防抖和節(jié)流的實現(xiàn)代碼,并附帶了使用示例,同時,文章還討論了帶立即執(zhí)行的防抖,以及如何快速記憶這兩種技術(shù),最后,文章提出可以為有需要的讀者編寫一個更高級的防抖節(jié)流版本,需要的朋友可以參考下

1. 防抖（Debounce）

原理：頻繁觸發(fā)時，只在最后一次觸發(fā)后延遲執(zhí)行，中間全部忽略。

最簡實現(xiàn)

function debounce(fn, delay = 300) {
  let timer = null;

  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

使用示例（搜索框）

const onSearch = debounce((value) => {
  console.log("請求搜索:", value);
}, 500);

input.addEventListener("input", (e) => {
  onSearch(e.target.value);
});

2. 節(jié)流（Throttle）

原理：固定時間內(nèi)只執(zhí)行一次，不管觸發(fā)多頻繁。

時間戳版（立即執(zhí)行，更常用）

function throttle(fn, interval = 300) {
  let lastTime = 0;

  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      fn.apply(this, args);
      lastTime = now;
    }
  };
}

使用示例（滾動）

const handleScroll = throttle(() => {
  console.log("滾動位置", window.scrollY);
}, 300);

window.addEventListener("scroll", handleScroll);

3. 帶立即執(zhí)行的防抖（可選）

有些場景希望第一次立即執(zhí)行，后面再防抖：

function debounceImmediate(fn, delay = 300) {
  let timer = null;

  return function (...args) {
    const isFirst = !timer;

    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
    }, delay);

    if (isFirst) {
      fn.apply(this, args);
    }
  };
}