为何需用变量存储防抖函数？双括号直接调用为何失效？

教程中的防抖实现代码 #

const input = document.querySelector("input");
const defaultText = document.getElementById("default");
const debounceText = document.getElementById("debounce");

const updateDebounceText = debounce(
  (text) => (debounceText.textContent = text),
  250
);

input.addEventListener("input", (e) => {
  defaultText.textContent = e.target.value;
  updateDebounceText(e.target.value);
});

function debounce(callback, delay = 1000) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => callback(...args), delay);
  };
}

疑问与尝试的错误写法 #

我有两个疑问：

1. 为何必须创建显式变量来调用防抖函数？
2. 能否直接在事件监听器中调用debounce？

我尝试了如下写法，但无法正常工作——每次输入新值时都会触发更新（虽有轻微延迟，但并非设置的防抖延迟）：

debounce((text) => (debounceText.textContent = text), 2500)(e.target.value);

问题原因解析 #

核心问题出在防抖函数的闭包特性上：

• 防抖函数debounce的本质是返回一个带有闭包的函数，这个闭包持有了内部的timeout变量，用来记录当前正在等待的定时器。
• 教程中的写法：const updateDebounceText = debounce(...)是把debounce返回的闭包函数存储起来，每次输入事件触发时，调用的都是同一个闭包函数。这意味着所有触发都共享同一个timeout变量：每次输入都会先清除上一次的定时器，再新建一个，只有当停止输入的时间超过设置的delay时，最后一个定时器才会执行回调，这才是防抖的核心逻辑。
• 你尝试的写法：每次事件触发时都重新调用debounce(...)()，相当于每次都生成一个全新的防抖实例。每个实例都有自己独立的timeout变量，新实例的clearTimeout只能清除自己的定时器，无法清除之前实例创建的定时器。结果就是每个输入都会启动一个独立的定时器，到时间就执行，自然达不到“停止输入后延迟执行”的防抖效果。

结论 #

要实现正确的防抖，必须复用debounce函数返回的闭包函数，而不是每次事件触发都重新生成新的防抖实例——这就是为什么需要创建显式变量来存储这个闭包函数的原因。

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