JavaScript 中防抖实现怎么用闭包保存计时器-js教程-PHP中文网

必须用闭包保存timer，因为闭包使每个debounce实例拥有独立的timer变量，避免重复初始化或全局污染，确保能清除前次定时器并维持私有状态。

javascript 中防抖实现怎么用闭包保存计时器

防抖函数通过闭包保存计时器（timer），是为了让每次调用时能清除上一次的定时任务，确保只执行最后一次触发的操作。闭包让 timer 在函数返回后的多次调用中持续存在、独立维护，不被垃圾回收。

为什么必须用闭包保存 timer

如果把 timer 声明在防抖函数内部但不借助闭包机制（比如写成局部变量又不返回闭包），它每次调用都会重新初始化，无法清除前一次的定时器；而如果声明为全局变量，多个防抖实例会互相干扰。闭包提供了「私有状态」——每个防抖函数实例拥有自己独立的 timer。

基础实现：闭包包裹 timer 变量

典型写法是返回一个新函数，该函数能访问外层函数作用域中的 timer：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

function debounce(fn, delay) {
  let timer = null; // 闭包变量，每个 debounce 调用都有一份独立副本
  return function (...args) {
    clearTimeout(timer); // 每次触发都清除之前的定时器
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

// 使用示例
const handleSearch = debounce(() => {
  console.log('发起搜索请求');
}, 300);

input.addEventListener('input', handleSearch);

支持立即执行与取消的增强版

实际项目中常需控制首次是否立即执行、以及手动取消防抖。这时仍靠闭包维持状态，但增加更多私有变量和方法：

function debounce(fn, delay, immediate = false) {
  let timer = null;
  let isPending = false; // 标记是否已有待执行任务

  const debounced = function (...args) {
    const later = () => {
      timer = null;
      if (!immediate) fn.apply(this, args);
    };
    const callNow = immediate && !timer;

    clearTimeout(timer);
    timer = setTimeout(later, delay);

    if (callNow) {
      fn.apply(this, args);
    }
  };

  debounced.cancel = function () {
    clearTimeout(timer);
    timer = null;
    isPending = false;
  };

  return debounced;
}