自定义debounce函数keyup时立即触发，如何实现停止输入1秒后执行？

核心问题点 #

• 调用debounce时直接执行了saveInput(event.target.value)，相当于把函数执行的返回值（此处为undefined）传给了防抖函数的第一个入参，所以alert会在每次按键时立即触发，完全没有进入防抖控制逻辑。
• 每次触发keyup事件调用processChange时，都会重新生成一个全新的防抖函数实例，每个实例自带独立的timer变量，无法复用同一个定时器做清除操作，防抖逻辑自然失效。

修正后代码 #

JS代码 #

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

function saveInput(value) {
  alert(value);
}

// 提前生成防抖后的事件处理函数，复用同一个闭包内的timer
const processChange = debounce((event) => {
  saveInput(event.target.value);
}, 1000);

HTML代码（无需修改） #

<input type="text" onkeyup="processChange(event)" />

修正说明 #

• 防抖后的处理函数提前声明，全程复用同一个实例，闭包内的timer变量会被持续保留，每次触发事件时都能正确清除上一次未执行的定时器。
• 给debounce传入的第一个参数是未执行的函数引用，只有等定时器计时结束后，才会真正调用saveInput获取输入框的完整内容弹出提示。

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