脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript实现防抖和节流

在JavaScript中实现防抖和节流的方法详解

 更新时间：2026年03月26日 08:56:13   作者：用户975147075136  
文章介绍了防抖和节流的基本原理,提供了最常用的防抖和节流的实现代码,并附带了使用示例,同时,文章还讨论了带立即执行的防抖,以及如何快速记忆这两种技术,最后,文章提出可以为有需要的读者编写一个更高级的防抖节流版本,需要的朋友可以参考下

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

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

以上就是在JavaScript中实现防抖和节流的方法详解的详细内容，更多关于JavaScript实现防抖和节流的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论