clearTimeout无法清除定时器？按键间隔接近延迟时重复输出问题排查

希望在keyup事件触发时实现防抖（debounce）效果：1000毫秒内触发的所有事件中，仅执行最后一次输入值的打印。现有代码通过clearTimeout清除之前的定时器后重新设置，但当按键间隔接近1000毫秒时，会出现重复打印相同值的情况。猜测当定时器回调从任务队列进入调用栈执行后，clearTimeout便无法生效，想了解该问题的原因及基于现有代码的解决方案。

现有代码示例：

let timer = null;

function withdelay() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    handleChange();
  }, 1000);
}

function handleChange() {
  console.log(document.getElementById("texto").value);
}

<input type="text" id="texto" onkeyup="withdelay()" />

你的猜测完全正确，核心问题就是定时器回调进入任务队列后，clearTimeout无法再取消它的执行。

当两次按键间隔刚好接近1000ms时，第一次设置的定时器已经完成计时，对应的回调函数被推入任务队列等待执行。此时按下第二次按键，执行clearTimeout(timer)只能取消还未进入任务队列的定时器，对已经在队列里等待的旧回调无能为力。等当前调用栈空闲后，队列里的旧回调和新设置的定时器到期后的新回调会依次执行，最终导致重复打印。

基于现有代码，提供两种简单的修复方式：

方式一：校验定时器有效性 #

每次设置定时器时保存当前的定时器ID，在回调执行前判断timer是否与该ID一致——只有相等时才执行逻辑，确保仅最后一次设置的定时器回调生效。

修改后的JS代码：

let timer = null;

function withdelay() {
  clearTimeout(timer);
  // 保存当前定时器的ID
  const currentTimer = setTimeout(() => {
    // 仅当当前timer与回调对应的ID一致时执行
    if (timer === currentTimer) {
      handleChange();
    }
  }, 1000);
  timer = currentTimer;
}

function handleChange() {
  console.log(document.getElementById("texto").value);
}

方式二：提前缓存输入值 #

在触发withdelay时就获取并缓存当前输入值，让定时器回调直接使用缓存值。这种方式能避免“相同值重复打印”的问题，若两次输入值不同，也能保证打印的是对应触发时刻的值：

修改后的JS代码：

let timer = null;

function withdelay() {
  clearTimeout(timer);
  // 触发时立即获取当前输入值并缓存
  const currentValue = document.getElementById("texto").value;
  timer = setTimeout(() => {
    console.log(currentValue);
  }, 1000);
}

更推荐方式一，它能严格保证仅最后一次触发的防抖逻辑生效，彻底避免重复执行的问题。

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