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

原创

小焱写作

发布于 2026-03-25 14:00:22

350

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

1. 防抖（Debounce）

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

最简实现

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. 节流（Throttle）

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

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

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. 带立即执行的防抖（可选）

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

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 的高级版防抖节流吗？

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度

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

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

1. 防抖（Debounce）

最简实现

使用示例（搜索框）

2. 节流（Throttle）

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

使用示例（滚动）

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

4. 快速记忆

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐