JavaScript番茄钟倒计时暂停后点击开始重置问题求解

当前代码每次执行timer_start()都会直接读取选中计时模式的完整时长，重新计算结束时间戳，没有记录暂停时的剩余时长，也没有区分「首次启动」和「暂停后恢复」两种场景，所以点击开始就会直接重置到初始时长。另外原有代码存在变量未声明、逻辑判断符写误的小问题，会导致隐式全局变量、判断条件不生效的bug。

• 新增两个全局状态：remainingTime存储暂停时的剩余毫秒数，isPaused标记当前是否处于暂停状态
• 暂停时除了清除定时器，同步计算当前剩余时间存入remainingTime，将暂停标记设为true
• 启动时先判断状态：如果是暂停恢复场景，就用存储的剩余时间计算新的结束时间；如果是首次启动/切换模式后的启动，才读取对应模式的完整时长计算结束时间
• 切换番茄钟/短休/长休模式时，重置暂停状态和剩余时间，避免残留旧计时数据
• 补全未声明的全局变量，修正逻辑判断符的笔误

var timer = {
  pomodoro: 25,
  longBreak: 15,
  shortBreak: 5
}
var currentTimerType = timer.pomodoro;
var currentDate = new Date();
var minutesToAdd = 0;
var x; // 定时器实例
var countDownDate; // 倒计时结束时间戳
// 新增状态变量
var remainingTime = 0; // 暂停时剩余时长（毫秒）
var isPaused = false; // 暂停状态标记

function timer_pomodoro() {
   currentTimerType = timer.pomodoro;
   document.getElementById('minutes').innerHTML = '25';
   document.getElementById('seconds').innerHTML = '00';
   clearInterval(x);
   // 切换模式重置暂停状态
   isPaused = false;
   remainingTime = 0;
}
function timer_short() {
  currentTimerType = timer.shortBreak;
  document.getElementById('minutes').innerHTML = '5';
  document.getElementById('seconds').innerHTML = '00';
  clearInterval(x);
  // 切换模式重置暂停状态
  isPaused = false;
  remainingTime = 0;
}
function timer_long() {
  currentTimerType = timer.longBreak;
  document.getElementById('minutes').innerHTML = '15';
  document.getElementById('seconds').innerHTML = '00';
  clearInterval(x);
  // 切换模式重置暂停状态
  isPaused = false;
  remainingTime = 0;
}

function timer_start() {
  clearInterval(x); // 先清除已有定时器，避免重复创建
  var now = new Date().getTime();

  if (isPaused) {
    // 暂停恢复：用已保存的剩余时长计算结束时间
    countDownDate = new Date(now + remainingTime);
    isPaused = false;
  } else {
    // 首次/切换模式启动：用对应模式的完整时长
    switch(currentTimerType) {
      case timer.pomodoro:
        minutesToAdd=25;
        break;
      case timer.shortBreak:
        minutesToAdd=5;
        break;
      case timer.longBreak:
        minutesToAdd=15;
        break;
    }
    countDownDate = new Date(now + minutesToAdd*60000);
  }

  x = setInterval(myTimer, 1000);
  myTimer(); // 立即执行一次，避免启动后1秒才刷新显示
}

function myTimer() {
  var now = new Date().getTime();
  var distance = countDownDate - now;

  // 倒计时结束逻辑
  if (distance < 0) {
    clearInterval(x);
    document.getElementById('minutes').innerHTML = '00';
    document.getElementById('seconds').innerHTML = '00';
    isPaused = false;
    remainingTime = 0;
    return;
  }

  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // 数值小于10时补前导0，显示格式统一
  document.getElementById('minutes').innerHTML = minutes < 10 ? '0' + minutes : minutes;
  document.getElementById('seconds').innerHTML = seconds < 10 ? '0' + seconds : seconds;
}

function pause() {
  clearInterval(x);
  // 暂停时保存剩余时长，标记暂停状态
  remainingTime = countDownDate - new Date().getTime();
  isPaused = true;
}

如果需要更精准的计时，可以把setInterval的执行间隔调小（比如200毫秒），减少页面卡顿带来的计时误差；也可以在计时结束后加提示音、弹窗提醒等交互。

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