如何解决JS倒计时点击按钮后定时器叠加导致秒数走快的问题

问题根源 #

你当前代码的核心问题是：每次点击按钮启动新计时时，仅将存储定时器ID的变量timerInterval赋值为null，没有调用clearInterval清除上一个正在运行的定时器。旧的定时器会持续在后台执行，多次点击就会出现多个定时器同时累加timePassed的情况，最终表现为秒数流逝速度加快。

同时你的4个计时函数逻辑完全重复，存在大量冗余代码，可合并为公共函数降低维护成本。

修复步骤 #

1. 每次启动新计时前，先调用clearInterval清除上一个定时器
2. 合并4个重复的计时函数为统一的startTimer公共函数，接收时长参数即可
3. 重置计时时同步清空环形进度条的历史颜色类，避免颜色显示异常
4. 修正原代码中多余的1秒时长偏差（15分钟对应900秒即可，不需要设置为901）

完整修改代码 #

JS部分（替换原来的timer15/timer30/timer45/timer60四个函数） #

function startTimer(seconds) {
  // 清除上一个正在运行的定时器，解决堆叠问题
  clearInterval(timerInterval);

  // 重置所有计时状态
  TIME_LIMIT = seconds;
  timePassed = 0;
  timeLeft = TIME_LIMIT;

  // 重置环形进度条颜色为初始绿色
  const pathEl = document.getElementById("base-timer-path-remaining");
  const { alert, warning, info } = COLOR_CODES;
  pathEl.classList.remove(alert.color, warning.color);
  pathEl.classList.add(info.color);

  // 初始化计时显示与进度条样式
  document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
  setCircleDasharray();

  // 启动新定时器
  timerInterval = setInterval(() => {
    timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    
    document.getElementById("base-timer-label").innerHTML = formatTime(timeLeft);
    setCircleDasharray();
    setRemainingPathColor(timeLeft);

    if (timeLeft === 0) {
      onTimesUp();
    }
  }, 1000);
}

HTML部分（替换原来的4个按钮代码） #

<input type="button" onclick="startTimer(900)" value="15 min">
<input type="button" onclick="startTimer(1800)" value="30 min">
<input type="button" onclick="startTimer(2700)" value="45 min">
<input type="button" onclick="startTimer(3600)" value="60 min">

CSS代码不需要修改，直接复用原有代码即可。

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