如何基于已有秒数延续JavaScript计时器（崩溃恢复场景）

Hey there! Since you're new to JavaScript, let's break down how to adjust your existing timer code to pick up right where it left off using the elapsed seconds you get from your backend. Here's a straightforward tweak to your code that's easy to follow:

Modified Timer Function with Resume Support #

First, we'll update your Timer function to accept an initial elapsed seconds value, and track a virtual start time that accounts for the saved progress:

function Timer(id, initialSeconds = 0) { 
  // Store the virtual start time as a property of the Timer function (avoids messy global variables)
  if (!Timer.virtualStartTime) {
    // Calculate a "fake" start time: current time minus the saved elapsed milliseconds
    Timer.virtualStartTime = new Date().getTime() - (initialSeconds * 1000);
  }

  const currentTimeMs = new Date().getTime();
  const totalElapsedMs = currentTimeMs - Timer.virtualStartTime; 

  // Your original formatting logic stays mostly the same
  let hour = Math.floor((totalElapsedMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); 
  hour = hour < 10 ? `0${hour}` : hour; 
  
  let minute = Math.floor((totalElapsedMs % (1000 * 60 * 60)) / (1000 * 60)); 
  minute = minute < 10 ? `0${minute}` : minute; 
  
  let second = Math.floor((totalElapsedMs % (1000 * 60)) / 1000); 
  second = second < 10 ? `0${second}` : second; 
  
  $("#" + id).html(`${hour}:${minute}:${second}`); 
}

How to Use It #

When your page loads, fetch the saved elapsed seconds from your backend, then start the timer with that value:

// Example: Value retrieved from your backend (86415 seconds = 24:00:15)
const savedElapsedSeconds = 86415;

// Start the timer, updating every 1 second
setInterval(() => {
  Timer('your-timer-element-id', savedElapsedSeconds);
}, 1000);

Key Changes Explained #

• initialSeconds Parameter: This lets you pass in the saved elapsed time from your backend. We set a default of 0 so the timer still works normally when you don't need to resume.
• Timer.virtualStartTime: We use this function-level property to store a virtual start time. Instead of starting from the current time, we calculate a start time that would make the saved elapsed seconds already count towards the total. For example, if you have 86415 saved seconds, we subtract that (converted to milliseconds) from the current time to get a base that ensures those seconds are included in the total elapsed time.
• Cleaner Formatting: I swapped the if statements for ternary operators to make the code a bit tighter, but your original formatting logic works just as well!

Quick Tips #

• Make sure to fetch the latest saved elapsed seconds every time the page loads (or after a crash) so you're always resuming from the correct point.
• The Timer.virtualStartTime is only set once, so subsequent calls to Timer will keep using the same base time, ensuring the timer counts up smoothly.

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