Chrome番茄钟扩展播放按钮重置问题排查与修复请求

问题核心原因 #

1. 无剩余时间持久化存储：代码中没有变量保存计时器运行时的剩余时间，且getRemainingTime()函数未定义，导致暂停后无法恢复到正确时间点。
2. 暂停状态逻辑错误：暂停时将countdown设为null，点击播放按钮时，!countdown判断为真，会触发startFocus()重置到初始时长，而非执行恢复逻辑。
3. 停止重置流程不完整：停止后未将剩余时间恢复为初始值，状态与显示不同步。

修复方案 #

以下是调整后的完整代码，包含所有修复点：

document.addEventListener('DOMContentLoaded', () => {
  let countdown;
  let focusRound = 1;
  let focusDuration;
  let restDuration;
  let focusRounds;
  let isPaused = false;
  let currentRemainingTime; // 新增：存储当前剩余时间

  const focusTimeDisplay = document.getElementById('timer');
  const playBtn = document.getElementById('playBtnFocus');
  const pauseBtn = document.getElementById('pauseBtn');
  const stopResetBtn = document.getElementById('stop-reset');
  const focusIterationDisplay = document.getElementById('focusIteration');

  chrome.storage.local.get(['focusTime', 'restTime', 'rounds'], (result) => {
    focusDuration = result.focusTime;
    restDuration = result.restTime;
    focusRounds = result.rounds;
    currentRemainingTime = focusDuration; // 初始化剩余时间

    focusTimeDisplay.textContent = formatTime(currentRemainingTime);
    focusIterationDisplay.textContent = `Focus ${focusRound} / ${focusRounds}`;

    playBtn.addEventListener('click', () => {
      if (!countdown) {
        // 未启动状态，从头开始
        currentRemainingTime = focusDuration;
        startFocus();
      } else if (isPaused) {
        // 已暂停状态，恢复计时
        resumeCountdown();
      }
    });

    pauseBtn.addEventListener('click', () => {
      if (countdown && !isPaused) {
        clearInterval(countdown);
        isPaused = true;
        // 不再将countdown设为null，保留状态标识
      }
    });

    stopResetBtn.addEventListener('click', () => {
      if (countdown) {
        clearInterval(countdown);
        countdown = null;
      }
      // 重置剩余时间、状态与显示
      currentRemainingTime = focusDuration;
      isPaused = false;
      focusTimeDisplay.textContent = formatTime(currentRemainingTime);
    });

    // 自动启动计时器
    startFocus();
  });

  function startFocus() {
    isPaused = false;
    countdown = createCountdown(currentRemainingTime, focusTimeDisplay, () => {
      playSound('stopsound.wav');
      setTimeout(() => {
        if (focusRound < focusRounds) {
          focusRound++;
          chrome.runtime.sendMessage({ action: 'startRest' });
          window.close();
        } else {
          chrome.runtime.sendMessage({ action: 'showCongratulations' });
          window.close();
        }
      }, 1000);
    });

    focusIterationDisplay.textContent = `Focus ${focusRound} / ${focusRounds}`;
    playSound('startsound.wav');
  }

  function resumeCountdown() {
    isPaused = false;
    countdown = createCountdown(currentRemainingTime, focusTimeDisplay, () => {
      playSound('stopsound.wav');
      setTimeout(() => {
        if (focusRound < focusRounds) {
          focusRound++;
          chrome.runtime.sendMessage({ action: 'startRest' });
          window.close();
        } else {
          chrome.runtime.sendMessage({ action: 'showCongratulations' });
          window.close();
        }
      }, 1000);
    });

    playSound('startsound.wav');
  }

  function createCountdown(duration, display, callback) {
    let timeRemaining = duration;
    display.textContent = formatTime(timeRemaining);

    const countdownInterval = setInterval(() => {
      timeRemaining--;
      currentRemainingTime = timeRemaining; // 实时更新剩余时间

      if (timeRemaining < 0) {
        clearInterval(countdownInterval);
        countdown = null; // 计时结束后重置countdown状态
        callback();
      } else {
        display.textContent = formatTime(timeRemaining);
      }
    }, 1000);

    return countdownInterval;
  }

  function formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    seconds %= 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }

  function playSound(filename) {
    const audio = new Audio(chrome.runtime.getURL(filename));
    audio.play();
  }
});

关键修复点说明 #

• 新增currentRemainingTime变量，全程跟踪计时器的剩余时间，暂停、恢复、重置时都基于这个变量操作。
• 暂停时不再重置countdown为null，通过isPaused状态区分是否处于暂停状态，避免播放按钮误触发重置逻辑。
• 停止重置时同步更新currentRemainingTime为初始时长，确保状态与显示一致。
• 在createCountdown中实时更新currentRemainingTime，保证暂停时能获取到最新的剩余时间。

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