重置setInterval时出现多循环叠加问题，clearInterval未生效如何解决？

问题根因 #

你代码中的clearInterval逻辑完全未生效，是导致定时器叠加的核心原因：

• 定时器ID变量interval是startTimer函数的局部变量，每次调用函数都会重新初始化，根本无法保存上一次调用生成的定时器ID。每次执行clearInterval(interval)时，刚声明的interval值为undefined，等于没有清除任何正在运行的定时器。
• 每次点击按钮都会生成新的定时器，旧定时器持续运行不受影响，最终就会出现多个定时器同时执行、倒计时速度异常的叠加问题。

修复方案 #

将定时器ID存储在函数外层的持久作用域中，每次调用startTimer时先清除上一次运行的定时器，再创建新的定时器即可。

修复后的完整代码：

<span>LIVE: Election results will refresh in <span id="time">2:00</span> minutes.</span>
<input type="button" value="Timer" id="btn">
<script>
// 把定时器ID存到外层作用域，持久保存上一次的定时器标识
let interval = null;

$("#btn").on('click', function() {
  const twoMinutes = 60 * 2,
    display = document.querySelector('#time');
  startTimer(twoMinutes, display);
});

function startTimer(duration, display) {
  // 先清除上一次的定时器，避免叠加
  clearInterval(interval);
  let timer = duration,
    minutes, seconds;
  // 新生成的定时器ID保存到外层变量
  interval = setInterval(function() {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? +minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;
    if (--timer < 0) {
      timer = duration;
      LoadCandidatesCharts(true);
    }
  }, 1000);
}
</script>

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