函数防抖的核心是只执行最后一次触发的函数调用，依赖闭包保存并维护独立的定时器引用，确保多次触发时能清除旧定时器、重设新定时器，且不同实例互不干扰。

函数防抖（Debounce）的核心思想是：**在事件被频繁触发时，只执行最后一次触发对应的函数调用，忽略中间的多次调用**。它依赖闭包保存定时器引用，从而在下一次触发时清除旧定时器、重设新定时器。

防抖为什么需要闭包

防抖必须维持一个“上一次设置的定时器 ID”变量，以便在新事件到来时能及时清除它。这个变量不能放在全局作用域（污染、冲突），也不能写在函数内部（每次调用都重置）。闭包恰好提供了一个私有、持久、与特定防抖函数绑定的存储空间。

• 每次调用 debounce(fn, delay) 都返回一个新函数，该函数“记住”了自己专属的 timer 变量
• 不同防抖实例互不干扰：比如搜索框输入防抖和窗口 resize 防抖各自维护独立 timer
• timer 在返回的函数体内可读可写，外部无法访问，符合封装原则

基础闭包实现（支持立即执行可选）

以下是一个兼顾清晰性与实用性的标准实现：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

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

• immediate = true 表示首次触发立即执行，后续触发仍按 delay 延迟最后一次
• clearTimeout(timer) 是关键操作，它依赖闭包中持续存在的 timer 引用
• timer = null 在定时器回调末尾清空，避免内存残留，也便于下次判断是否为首次

实际使用中的注意事项

防抖不是万能的，需结合场景谨慎使用：

• 搜索建议适合防抖（用户打字停顿后再请求），但表单校验可能更适合节流或实时响应
• 注意 this 指向和参数传递：用 fn.apply(this, args) 保证原函数上下文和参数完整
• 如需手动取消防抖（例如组件卸载时），可返回带 cancel 方法的对象，或暴露 timer 供外部清理
• 避免在循环或高频渲染中反复创建防抖函数，应提前定义并复用

扩展：支持取消的防抖版本

当需要主动终止防抖逻辑（如 React 组件 unmount），可以返回一个对象：

function debounce(fn, delay) {
  let timer = null;
  const debounced = function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
      timer = null;
    }, delay);
  };
  debounced.cancel = () => {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  };
  return debounced;
}

• 调用 debounced.cancel() 可随时中断待执行的函数
• cancel 方法共享同一闭包作用域，能访问并修改 timer
• 适用于需要生命周期控制的现代前端框架场景

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南