Debounce函数执行次数未减少问题排查与解决求助

你的防抖函数出现多次执行的原因是在定时器回调later中多余调用了clearTimeout(timeout)，这会干扰正常的定时器清除逻辑，甚至导致旧定时器未被正确拦截而执行。

修改后的防抖函数 #

let debounce = (func, wait) => {
  let timeoutId;

  return function(...args) {
    // 清除之前未触发的定时器
    clearTimeout(timeoutId);
    // 重新设置定时器，仅在最后一次触发后延迟执行
    timeoutId = setTimeout(() => {
      func.apply(this, args); // 保证this指向正确（如事件绑定的元素）
    }, wait);
  };
};

关键修改点 #

• 移除了回调内部的clearTimeout(timeout)：这一步完全多余，因为每次触发防抖函数时已经先清除了之前的定时器，只有最后一次设置的定时器会到达执行时机。
• 使用func.apply(this, args)：确保目标函数的this指向符合预期（比如在事件监听中指向触发事件的DOM元素），原代码中箭头函数的this绑定会导致丢失正确的上下文。

测试验证 #

使用修改后的函数，快速在输入框中输入abc，只会在最后一次输入完成后等待500ms执行一次test函数，符合防抖的预期效果。

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