搜索框input事件中防抖函数失效原因咨询

问题场景 #

你编写了如下防抖函数：

function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
}

将其用于搜索框input事件时，直接在事件回调内调用debounce()的写法无法生效：

search.addEventListener("input", (e) => {
  eventCount++;
  eventOutput.textContent = eventCount;
  debounce(() => {
    apiRequestCount++;
    apiCount.textContent = apiRequestCount;
  }, 200);
});

但将防抖函数存入变量后再调用，却能正常工作：

const debouncedFunction = debounce(() => {
  apiRequestCount++;
  apiCount.textContent = apiRequestCount;
}, 200);

search.addEventListener("input", (e) => {
  eventCount++;
  eventOutput.textContent = eventCount;
  debouncedFunction();
});

核心原因解析 #

这两种写法的本质差异在于是否复用同一个防抖函数实例，关键要理解debounce函数的工作逻辑：

• debounce本身并不是直接执行传入的回调，而是返回一个带有防抖逻辑的新函数，这个新函数会通过闭包持有独立的timer变量，用来追踪定时器状态。

第一种写法失效的原因

每次input事件触发时，你都会调用一次debounce()，这会：

1. 创建一个全新的防抖函数实例，同时生成一个独立的timer闭包变量；
2. 但你并没有执行这个新生成的防抖函数，只是创建了它就结束了，所以传入的回调根本不会被触发；
3. 退一步说，就算你执行了debounce()()，每次事件触发都会生成新的防抖函数，每个函数的timer都是独立的，无法清除上一次触发的定时器，完全起不到防抖的作用。

第二种写法生效的原因

提前调用debounce()生成一个防抖函数实例并存入debouncedFunction变量，之后每次input事件触发时：

1. 调用的都是同一个防抖函数实例；
2. 这个实例通过闭包持有同一个timer变量，每次触发都会先清除上一次的定时器，再重新设置新的定时器，完美实现了“连续触发时只执行最后一次”的防抖逻辑。

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