clearInterval无法清除intervalID？JS秒表启停功能异常求助

我想做一个支持启停的秒表，思路是启动时调用setInterval，暂停时用clearInterval清除定时器，并把全局变量intervalID设为null。但实际测试发现定时器没被清除，这是哪里错了？另外还有个疑问：清除后重启定时器，新的intervalID是递增的新值，不是原来的ID，我用的是macOS上的Firefox浏览器。

我的代码如下：

JavaScript代码 #

const o = document.querySelector("div");
const b = document.querySelector("button");
let intervalID = null;
let timer;

b.addEventListener("click", () => {
  if (intervalID !== null) {
    console.log("instance already running lets clear Interval by IntervalIdD");
    clearInterval(intervalID);
    console.log("interval_cleared",intervalID);
    intervalID = null;
    return;  
  } 
  
  intervalID = setInterval(function() {
    console.log(123)
  }, 1000);

  console.log("interval",intervalID);
})

HTML代码 #

<div>0</div>
<button>Start / Stop</button>

定时器未被清除的原因排查 #

你写的代码逻辑本身没问题，clearInterval(intervalID)确实能终止对应的定时器。如果实际用起来定时器没停，大概率是以下两种情况：

• 重复绑定点击事件：如果你的代码被执行了多次（比如脚本重复加载），同一个按钮会绑定多个点击回调。每次点击都会创建新的定时器，但你只清除了当前intervalID指向的那个，其他没被记录的定时器还在跑。可以检查代码是否重复执行，或者绑定事件前先移除旧的监听：b.removeEventListener('click', 你的回调函数)（注意要把回调抽成具名函数，不能用匿名箭头函数）。
• 队列回调的延迟执行：setInterval的回调是按间隔排入任务队列的，当你调用clearInterval时，队列里可能已经有一个待执行的回调了。这时候清除后还会看到一次123输出，这不是定时器没停，而是已经排队的任务要跑完。

为什么定时器ID会递增 #

浏览器的定时器ID是全局自增的唯一标识，不管之前的定时器有没有被清除，每次调用setInterval或setTimeout都会生成一个新的ID。这是浏览器的设计规则：用递增计数器生成ID，不会复用旧ID，避免不同定时器之间的ID冲突。这个行为在所有现代浏览器里都一样，Firefox也不例外，属于正常现象，完全不影响功能。

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