JavaScript中函数防抖怎么实现以及怎么合并频繁触发的事件-js教程-PHP中文网

函数防抖的核心是只执行最后一次触发，忽略中间调用，适用于搜索输入、窗口调整等场景；通过settimeout延迟执行并每次清除前次定时器实现；支持immediate参数控制首次立即执行。

javascript中函数防抖怎么实现以及怎么合并频繁触发的事件

函数防抖（Debounce）的核心是：**只执行最后一次触发，忽略中间的多次调用**。它适合处理“用户停止操作后才执行”的场景，比如搜索框输入、窗口大小调整、按钮重复点击等。

防抖的基本实现原理

防抖的关键在于用 setTimeout 延迟执行，并在每次新触发时清除之前的定时器。这样只有最后一次触发能“活下来”，真正执行回调。

一个简洁可靠的实现如下：

function debounce(func, wait) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

使用示例：

const handleResize = () => console.log('窗口调整完成');
const debouncedResize = debounce(handleResize, 200);
window.addEventListener('resize', debouncedResize);

带立即执行选项的增强版防抖

有些场景需要“首次触发立刻执行，后续连续触发则延迟执行最后一次”（即 leading + trailing 模式）。这时可扩展参数控制行为：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

leading: true 表示第一次触发立即执行，之后进入冷却期
trailing: true 表示最后一次触发后延迟执行（默认行为）
两者都为 true 时，首次立即执行，末次延迟执行（注意可能重复）

简化版支持 leading 的写法：

function debounce(func, wait, immediate = false) {
  let timeoutId;
  return function(...args) {
    const callNow = immediate && !timeoutId;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      timeoutId = null;
      if (!immediate) func.apply(this, args);
    }, wait);
    if (callNow) func.apply(this, args);
  };
}