JavaScript点击Stop按钮调用clearInterval无法停止计数问题求助

问题根因 #

• clearInterval需要传入setInterval执行后返回的定时器ID才能停止对应定时器，你现在传入的是计数用的数值变量，不是定时器ID，自然无法生效。
• 你在animateValue函数内部重新用var声明了同名的current变量，这个是函数内的局部变量，直接覆盖了全局的current变量，全局的current从始至终都保持初始值1，没有存储定时器ID。

修复后的代码 #

<p>Count Up:</p>
<p id="count">1</p>
<button onclick="clearInterval(timerId)">Stop</button>
<script>
  // 单独声明全局变量存储定时器ID
  var timerId;
  function animateValue(id) {
    var obj = document.getElementById(id);
    var count = parseInt(obj.innerHTML);
    // 把定时器返回的ID存到全局变量里
    timerId = setInterval(function () {
      count++;
      obj.innerHTML = count;
    }, 1000);
  }
  animateValue("count");
</script>

调整说明 #

• 新增单独的全局变量timerId专门存储setInterval返回的定时器ID，避免和计数变量重名冲突
• 计数逻辑单独用局部变量count实现，和定时器ID变量区分开
• 停止按钮点击时直接传入存储了定时器ID的timerId给clearInterval即可生效

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