番茄钟项目：计时器暂停后点击Start无法恢复，自动切换时段求助

Hey there! I see exactly what's going on with your Pomodoro timer—when you pause and hit Start again, it's jumping to the next interval instead of picking up where you left off. That's because your current code is hardwired to switch intervals every time you trigger the start logic, and it doesn't save the remaining time when you pause. Let's fix this step by step.

What's Going Wrong Now #

1. Your start button calls getDeadline() directly, and that function always flips the isSession flag and starts a fresh timer—no consideration for any paused time.
2. You don't have any variables tracking:
   • Whether the timer is currently running or paused
   • How many seconds were left when you hit Stop
   • Which interval (session/break) was active when paused

How to Fix It #

1. Update Your Data Model to Track State

First, add a few key properties to your data object to keep track of the timer's current state:

var data = { 
  session: 25, 
  break: 5, 
  isSession: true,
  isRunning: false, // Tracks if timer is active
  remainingSeconds: null // Stores time left when paused
}

2. Refactor the Timer Logic

We need to split the "start a new interval" logic from the "resume a paused timer" logic. Here's what to adjust:

• Make the Start button check if there's paused time to resume, otherwise start a fresh interval
• Let the Next button handle switching intervals explicitly
• Update the Stop button to save the remaining time when paused

3. Clean Up the Timer View Code

We'll reorganize the timer object to make responsibilities clearer, fix this binding issues, and separate event handling from core logic.

Full Modified Code #

//======MODEL======//
// Default: 25min session, 5min break
var data = { 
  session: 25, 
  break: 5, 
  isSession: true,
  isRunning: false,
  remainingSeconds: null
}
//===== OCTOPUS=====//
var octopus = {
  init: function() {
    settings.init();
    timer.init();
  },
  // Settings getters/setters
  getCurrentSession: function() {
    return data.session;
  },
  getCurrentBreak: function() {
    return data.break;
  },
  // Timer state getters/setters
  getIsRunning: function() {
    return data.isRunning;
  },
  setIsRunning: function(status) {
    data.isRunning = status;
  },
  getRemainingSeconds: function() {
    return data.remainingSeconds;
  },
  setRemainingSeconds: function(seconds) {
    data.remainingSeconds = seconds;
  },
  getIsSession: function() {
    return data.isSession;
  },
  toggleSession: function() {
    data.isSession = !data.isSession;
  },
  // Counter adjustment methods
  incrementSessionCounter: function() {
    data.session++;
    settings.render();
  },
  incrementBreakCounter: function() {
    data.break++;
    settings.render();
  },
  decrementSessionCounter: function() {
    data.session--;
    settings.render();
  },
  decrementBreakCounter: function() {
    data.break--;
    settings.render();
  }
}
//----- VIEW----//
var settings = {
  init: function() {
    this.session = document.getElementById("displaySession");
    this.break = document.getElementById("displayBreak");
    this.incrementSession = document.getElementById("increaseSession");
    this.decrementSession = document.getElementById("decreaseSession");
    this.incrementBreak = document.getElementById("increaseBreak");
    this.decrementBreak = document.getElementById("decreaseBreak");

    // Bind adjustment buttons
    this.incrementSession.addEventListener("click", () => octopus.incrementSessionCounter());
    this.decrementSession.addEventListener("click", () => octopus.decrementSessionCounter());
    this.incrementBreak.addEventListener("click", () => octopus.incrementBreakCounter());
    this.decrementBreak.addEventListener("click", () => octopus.decrementBreakCounter());

    this.render();
  },
  render: function() {
    this.session.textContent = octopus.getCurrentSession();
    this.break.textContent = octopus.getCurrentBreak();
  }
}
var timer = {
  init: function() {
    this.startBtn = document.getElementById("start");
    this.stopBtn = document.getElementById("stop");
    this.nextBtn = document.getElementById("next");
    this.display = document.getElementById("countdown-timer");
    this.interval = null;
    this.then = null; // Stores the target end time for the timer

    this.bindEvents();
    this.renderInitialTime();
  },
  bindEvents: function() {
    // Start button: resume if paused, else start fresh
    this.startBtn.addEventListener("click", () => {
      if (!octopus.getIsRunning()) {
        const remaining = octopus.getRemainingSeconds();
        remaining ? this.resumeTimer(remaining) : this.startNewInterval();
      }
    });

    // Next button: switch interval and start fresh
    this.nextBtn.addEventListener("click", () => {
      octopus.toggleSession();
      this.startNewInterval();
    });

    // Stop button: pause and save remaining time
    this.stopBtn.addEventListener("click", () => {
      if (octopus.getIsRunning()) {
        clearInterval(this.interval);
        octopus.setIsRunning(false);
        // Calculate and save remaining seconds
        const now = Date.now();
        const secondsLeft = (this.then - now) / 1000;
        if (secondsLeft > 0) octopus.setRemainingSeconds(secondsLeft);
      }
    });
  },
  renderInitialTime: function() {
    const initialMinutes = octopus.getIsSession() ? octopus.getCurrentSession() : octopus.getCurrentBreak();
    this.displayTimeLeft(initialMinutes * 60);
  },
  startNewInterval: function() {
    octopus.setRemainingSeconds(null); // Clear any paused time
    clearInterval(this.interval);
    const intervalMinutes = octopus.getIsSession() ? octopus.getCurrentSession() : octopus.getCurrentBreak();
    this.startTimer(intervalMinutes * 60);
  },
  resumeTimer: function(seconds) {
    this.startTimer(seconds);
  },
  startTimer: function(seconds) {
    octopus.setIsRunning(true);
    const now = Date.now();
    this.then = now + seconds * 1000;

    this.interval = setInterval(() => {
      const secondsLeft = (this.then - Date.now()) / 1000;
      if (secondsLeft < 0) {
        clearInterval(this.interval);
        octopus.setIsRunning(false);
        octopus.setRemainingSeconds(null);
        // Auto-switch to next interval when time runs out
        octopus.toggleSession();
        this.startNewInterval();
        return;
      }
      this.displayTimeLeft(secondsLeft);
    }, 1000);
  },
  displayTimeLeft: function(seconds) {
    const minutes = Math.floor(seconds / 60);
    const remainderSeconds = Math.round(seconds % 60);
    // Ensure seconds are always two digits
    this.display.textContent = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`;
  }
}
octopus.init();

<!-- Settings Section -->
<section>
  <div id="session">
    <button type="button" id="increaseSession">+</button>
    <span id="displaySession">25</span>
    <button type="button" id="decreaseSession">-</button>
  </div>
  <div id="break">
    <button type="button" id="increaseBreak">+</button>
    <span id="displayBreak">5</span>
    <button type="button" id="decreaseBreak">-</button>
  </div>
  <div>
    <button id="start">START</button>
    <button id="next">NEXT</button>
    <button id="stop">STOP</button>
  </div>
</section>

<!-- Timer Display -->
<div id="countdown-timer"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Key Improvements #

• State Tracking: We now track if the timer is running and how much time is left when paused, so we can resume exactly where we stopped.
• Separation of Concerns: The Start button handles resuming/pausing, Next handles switching intervals, and Stop handles pausing—no more overlapping logic.
• Cleaner Code: We fixed this binding issues with arrow functions, separated event binding from core logic, and simplified the time display formatting.

Now when you hit Stop, the remaining time is saved, and hitting Start again will pick up right where you left off instead of switching intervals.

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