如何在 JavaScript 中实现防抖和节流？

用户9751470751362026-03-25 14:36

下面给你最常用、最标准、直接可复制的防抖 & 节流实现，附带使用示例，一看就会。

1. 防抖（Debounce）

原理：频繁触发时，只在最后一次触发后延迟执行，中间全部忽略。

最简实现

ini 复制代码

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

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

使用示例（搜索框）

javascript 复制代码

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

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

2. 节流（Throttle）

原理：固定时间内只执行一次，不管触发多频繁。

时间戳版（立即执行，更常用）

ini 复制代码

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;
    }
  };
}

使用示例（滚动）

javascript 复制代码

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

window.addEventListener("scroll", handleScroll);

3. 带立即执行的防抖（可选）

有些场景希望第一次立即执行，后面再防抖：

ini 复制代码

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);
    }
  };
}

4. 快速记忆

防抖：等你停手再执行 → 搜索框、输入验证、按钮防重复点击
节流：冷却时间 → 滚动、拖拽、resize、高频点击

需要我给你写一个带取消功能、支持立即执行、兼容 React 的高级版防抖节流吗？