JavaScript中怎么用闭包实现防抖函数并在多次触发时复用同一个定时器-js教程-PHP中文网

闭包实现防抖的核心是通过闭包保存 timerid，使多次调用共享同一变量，每次触发时清除旧定时器并设置新定时器，确保只执行最后一次。

javascript中怎么用闭包实现防抖函数并在多次触发时复用同一个定时器

用闭包实现防抖函数的核心，是让返回的函数“记住”上一次设置的定时器 ID，并在新调用时清除它，再设新定时器。这样多次触发只会复用（更准确说是“替换”）同一个定时器逻辑，而非创建多个。

闭包保存 timerId 是关键

防抖不是要“复用同一个定时器实例”，而是每次触发都清除前一个、设置一个新的——而这个“前一个”的引用必须被持久保存。闭包正好提供这个能力：内部函数能访问并修改外层函数作用域中的变量（比如 timerId）。

示例实现：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function debounce(fn, delay) {
  let timerId = null;
  return function (...args) {
    if (timerId !== null) {
      clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
      fn(...args);
      timerId = null; // 执行完可清空，非必须但更清晰
    }, delay);
  };
}

如何确保“多次触发只走最后一次”

每次调用返回的防抖函数时，都会执行以下三步：

检查当前 timerId 是否存在，存在就清除（避免旧任务执行）
用 setTimeout 设置新定时器
把新定时器 ID 赋给 timerId，供下一次调用时清除

由于 timerId 被闭包捕获，所有调用共享同一份引用，自然实现“覆盖式”控制。

实际使用注意点

必须把防抖函数赋值给变量（如 const handleInput = debounce(onChange, 300)），否则每次调用 debounce() 都会新建闭包，timerId 不共享
如果需要手动取消防抖（比如组件卸载），可在返回函数上挂载一个 cancel 方法：

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