为何标准Debounce实现未调用函数？与自定义实现差异解析

我参考网上多款防抖函数重写了一个debouncer函数，想理解为何存在作用域问题的自定义实现可正常工作，而标准实现却无法按预期调用函数。

测试代码 #

我用以下代码测试两种实现：

debounce(() => {
 console.log('the output was debounced');
}, 1000);

自定义实现（有作用域问题但可运行） #

该代码位于debounce.js模块中，通过模块作用域保存timeout ID：

const DEFAULT_TIME = 100;
let timeoutId = 0;

export default function debounce(callback, time = DEFAULT_TIME) {
  if (!callback) {
    console.warn('No function supplied to debounce');
    return;
  }

  if (timeoutId) {
    clearTimeout(timeoutId);
  }

  timeoutId = setTimeout(() => {
    callback();
  }, time);
}

标准实现（需额外调用才执行） #

这是普遍认可的标准防抖实现：

export default function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}

按预期该实现应在超时后执行函数，但实际使用时必须在调用末尾加()才能触发：

debounce(() => {
 console.log('the output was debounced');
}, 1000)();

或者在防抖函数内部立即执行返回的函数：

export default function debounce(func, timeout = 300){
  let timer;
  return (function (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  })();
}

我还尝试了另一种导出方式，但出现问题：

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
export default debounce;

该实现会等待超时，但会一次性执行所有函数，似乎是因为timer不在clearTimeout()的作用域内，值为undefined。

想知道这是否与函数的导出方式有关？

1. 两种实现的核心差异：函数执行逻辑 #

你的自定义实现和标准实现的本质区别在于调用时机和返回值：

• 自定义实现：调用debounce()时，直接执行防抖逻辑（清除旧定时器、设置新定时器），没有返回函数，所以测试代码直接就能触发定时器逻辑。
• 标准实现：调用debounce()时，返回一个待执行的防抖函数，而不是立即执行逻辑。所以需要再调用一次返回的函数（即加()），才会触发定时器的创建与清除逻辑。

这和导出方式完全无关，是两种实现的设计逻辑不同：

• 自定义实现是立即执行型：调用就启动防抖流程。
• 标准实现是高阶函数型：返回一个可以重复调用的防抖函数，适合绑定事件监听（比如input、scroll事件），每次事件触发时调用这个返回的函数，就能实现防抖。

2. 自定义实现的作用域问题 #

你的自定义实现把timeoutId放在模块作用域，这会导致所有调用该防抖函数的逻辑共享同一个定时器ID。比如同时防抖两个不同的回调，后调用的会覆盖前一个的定时器，导致前一个回调永远不会执行。这是严重的设计缺陷，只是在单一场景下测试时表现正常。

3. 第三种实现的问题分析 #

你最后尝试的导出方式和标准实现逻辑一致，但出现“一次性执行所有函数”的问题，原因是每次调用debounce()都会创建一个新的timer变量和新的返回函数。如果你多次调用debounce()并执行返回的函数，这些函数各自持有独立的timer，互相无法清除对方的定时器，所以所有回调都会在超时后执行。

正确的用法应该是：只调用一次debounce()获取防抖函数，然后重复调用这个防抖函数，比如：

// 先创建防抖函数
const debouncedFunc = debounce(() => {
  console.log('the output was debounced');
}, 1000);

// 多次调用这个防抖函数，才会触发防抖逻辑
debouncedFunc();
debouncedFunc();
debouncedFunc();

这样所有调用都会共享同一个timer变量，实现正确的防抖效果。

4. 标准实现设计成高阶函数的原因 #

这种设计是为了复用防抖逻辑：比如给输入框绑定防抖的输入事件处理函数，只需要创建一次防抖函数，然后绑定到input事件上，每次输入触发事件时，自动调用这个防抖函数，就能实现输入结束后才执行逻辑的效果。如果像你的自定义实现那样，每次事件触发都调用debounce()，反而会因为模块作用域的timeoutId导致逻辑混乱。

内容的提问来源于stack exchange，提问作者overbyte