ReactJS计时器为何出现时间漂移，而Vanilla JavaScript无此问题？

Great question! Let's dig into why your React timer is drifting over time, while the vanilla JS version stays perfectly aligned with real-world time.

The Root Cause: React State Updates Reset Your Timer's "Starting Line" #

Let's break down the key difference between your two implementations:

Vanilla JS Behavior #

In your vanilla code, when you click "Play", you initialize startTime once to the current timestamp. Every time the interval runs, you calculate the elapsed time using this original startTime, not a new one. This means you're always measuring the exact time that's passed since you first hit play, so the timer stays accurate:

// Vanilla JS: startTime is set ONCE when play is clicked
let startTime = new Date();
intervalId = setInterval(() => {
  // Uses the original startTime every time
  counter + Math.floor((startTime.getTime() - new Date().getTime()) / 1000)
}, 200);

React Code's Flaw #

In your React component, the useEffect has dependencies on isPlaying and clockTime. Every time you update clockTime (via setClockTime), the effect re-runs. When it re-runs, you create a new startTime and a new interval. This is the problem:

• Each time clockTime updates, you're resetting the "starting point" of your timer to the current time.
• Instead of calculating time passed since the original play button click, you're calculating time passed since the last state update.
• These small discrepancies add up over time, causing the drift you observed (2 seconds over 20 minutes).

Here's the problematic part of your React code:

// React: startTime is reset EVERY TIME clockTime changes
useEffect(() => {
  if (isPlaying) {
    let startTime = new Date(); // Reinitialized on every clockTime update
    const intervalId = setInterval(() => {
      setClockTime(
        clockTime - (new Date().getTime() - startTime.getTime()) / 1000
      );
    }, 200);
    return () => clearInterval(intervalId);
  }
}, [isPlaying, clockTime]); // clockTime in dependencies triggers re-run

Fixing the React Timer #

To fix the drift, we need to preserve the original startTime across re-renders and avoid resetting it on every state update. We can use useRef for this, since refs hold their values between renders without triggering re-renders.

Here's the corrected React code:

import React, { useState, useEffect, useRef } from 'react';
import './App.css';

function App() {
  const [sessionTime, setSessionTime] = useState(82.5);
  const [breakTime, setBreakTime] = useState(7.5);
  const [clockTime, setClockTime] = useState(82.5 * 60);
  const [current, setCurrent] = useState('session');
  const [isPlaying, setIsPlaying] = useState(false);
  const startTimeRef = useRef(null); // Holds original start time
  const intervalIdRef = useRef(null); // Holds interval ID

  useEffect(() => {
    document.title = convertTime(clockTime);
  }, [clockTime]);

  useEffect(() => {
    if (isPlaying) {
      // Set startTime ONLY when starting play
      startTimeRef.current = new Date();
      intervalIdRef.current = setInterval(() => {
        const elapsedSeconds = (new Date().getTime() - startTimeRef.current.getTime()) / 1000;
        const remainingTime = clockTime - elapsedSeconds;

        if (remainingTime <= 0) {
          // Switch between session/break
          const newCurrent = current === 'session' ? 'break' : 'session';
          const newClockTime = newCurrent === 'session' ? sessionTime * 60 : breakTime * 60;
          
          setCurrent(newCurrent);
          setClockTime(newClockTime);
          // Reset startTime for the new phase
          startTimeRef.current = new Date();
        } else {
          setClockTime(remainingTime);
        }
      }, 200);
    } else {
      // Clear interval when paused
      if (intervalIdRef.current) {
        clearInterval(intervalIdRef.current);
      }
    }

    // Cleanup on unmount or isPlaying change
    return () => {
      if (intervalIdRef.current) {
        clearInterval(intervalIdRef.current);
      }
    };
  }, [isPlaying, clockTime, current, sessionTime, breakTime]);

  const handlePlayClick = () => {
    setIsPlaying(true);
  };

  const handlePauseClick = () => {
    setIsPlaying(false);
  };

  const convertTime = (count) => {
    let hours = Math.floor(count / 3600);
    let minutes = Math.floor(count / 60) - hours * 60;
    let seconds = parseFloat(count % 60).toFixed(0);
    if (hours < 10) hours = `0${hours}`;
    if (minutes < 10) minutes = `0${minutes}`;
    if (seconds < 10) seconds = `0${seconds}`;
    return `${hours}:${minutes}:${seconds}`;
  };

  return (
    <div className='App'>
      <span>{convertTime(clockTime)}</span>
      <span>{current}</span>
      {isPlaying ? (
        <button onClick={handlePauseClick}>Pause</button>
      ) : (
        <button onClick={handlePlayClick}>Play</button>
      )}
    </div>
  );
}

export default App;

Key Fixes Explained: #

1. useRef for Persistent Values: startTimeRef stores the exact time the timer started (or restarted after a session/break switch), so it doesn't get reset on state updates.
2. Single Interval per Play: The interval is only created when isPlaying becomes true, and cleared when it becomes false. No more re-creating intervals on every clockTime update.
3. Accurate Elapsed Time Calculation: We always calculate time passed since the original startTimeRef.current, ensuring the remaining time is based on real-world time, not intermediate state updates.

Summary #

• Your vanilla JS timer stays accurate because it uses a single, unchanging starting timestamp for all calculations.
• The React timer drifted because every state update reset the starting timestamp, leading to cumulative small errors.
• By using useRef to preserve the original start time and avoiding unnecessary effect re-runs, we can make the React timer just as accurate as the vanilla version.

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