使用clearInterval()暂停计时器时多扣除1秒的问题排查

我制作了一个带有15秒计时器的录音器，启停功能正常，但暂停录音时，录音虽已暂停，计时器却会多扣除1秒才停止。以下是我尝试的两段代码：

第一段尝试代码 #

const countDown = setInterval(() => {

  displayTime(timeSecond);
  if (timeSecond == 0 || timeSecond < 1) {
    endCount();
    clearInterval(countDown);
  }  
  if (recorder && recorder.state === 'paused') {
  
  clearInterval(countDown)
}
  else{
  timeSecond--;
  }
}, 1000);

第二段尝试代码 #

const countDown = setInterval(() => {

  displayTime(timeSecond);
  if (timeSecond == 0 || timeSecond < 1) {
    endCount();
    clearInterval(countDown);
  }  
  if (recorder && recorder.state === 'paused') {
  
  clearInterval(countDown)
}
  timeSecond--;
}, 1000);

问题分析 #

两段代码的核心问题在于执行顺序不合理：

• 第二段代码中，无论是否暂停都会执行timeSecond--，导致暂停时当前回调已经把时间减了1秒才清除定时器，自然会多扣1秒。
• 第一段代码虽把timeSecond--放在else分支，但先执行displayTime(timeSecond)再判断暂停状态。如果用户在displayTime执行后、暂停判断前触发暂停，加上setInterval的精度误差，容易让用户感知到时间多跳了一次。

解决代码 #

调整执行顺序，先判断停止条件（暂停或时间耗尽），再处理计时和显示，确保暂停时不会执行时间递减：

const countDown = setInterval(() => {
  // 先检查是否需要终止计时
  if (timeSecond <= 0) {
    endCount();
    clearInterval(countDown);
    displayTime(timeSecond); // 显示最终剩余时间
    return;
  }
  if (recorder && recorder.state === 'paused') {
    clearInterval(countDown);
    displayTime(timeSecond); // 确保暂停时显示当前正确时间
    return;
  }

  // 正常计时逻辑：先显示当前时间，再递减
  displayTime(timeSecond);
  timeSecond--;
}, 1000);

额外优化建议 #

• 若需要更精确的计时，建议使用performance.now()计算时间差，避免setInterval在浏览器后台等场景下的延迟误差。
• 暂停时保存定时器实例，恢复时重新创建定时器，保证计时的连贯性。

内容的提问来源于stack exchange，提问作者waleed ali mian