React定时器页面刷新状态保持问题：计时显示偏差排查

问题根源分析 #

1. 计时偏差原因：暂停时依赖useNow返回的now状态计算已流逝时间，但now是每秒更新一次的状态，和实际暂停时刻存在最多1秒的误差，导致保存的状态和实际时间不符。
2. 刷新重置原因：initialTimer存在组件内部useState，页面刷新后会重置为0，没有从已保存的itemtask数据中读取历史状态。

修复方案及代码 #

下面是修正后的Timer组件代码，同时解决计时偏差和刷新状态保留问题：

function Timer({ itemtask, setUpdateTime }) {
  // 计算任务的总设置时长（毫秒）
  const totalSetTime = itemtask.minutes * 60000 + itemtask.seconds * 1000;
  const [startAt, setStartAt] = useState(null);
  // 从保存的itemtask反推初始已流逝时间：总时长 - 剩余时长，页面刷新自动恢复状态
  const [initialTimer, setInitialTimer] = useState(totalSetTime - (itemtask.minutes * 60000 + itemtask.seconds * 1000));

  function useNow(updateInterval, enabled) {
    const [now, setNow] = useState(Date.now());

    useLayoutEffect(() => {
      if (!enabled) return;

      const interval = setInterval(() => {
        setNow(Date.now());
      }, updateInterval);

      return () => clearInterval(interval);
    }, [updateInterval, enabled]);

    return now;
  }

  const now = useNow(1000, startAt !== null);
  // 计算当前已流逝时间：运行中则累加实时时长，暂停时直接用初始值
  const elapsedTime = startAt ? (now - startAt) + initialTimer : initialTimer;
  const countDown = totalSetTime - elapsedTime;

  const isCountEnd = countDown < 0 && totalSetTime > 0;
  useEffect(() => {
    if (isCountEnd) {
      alert(`${itemtask.task} completed`);
    }
  }, [isCountEnd, itemtask.task]);

  const toggleTimer = () => {
    if (startAt) {
      // 暂停时用当前精确时间计算已流逝时长，避免useNow的1秒延迟误差
      const preciseElapsed = (Date.now() - startAt) + initialTimer;
      // 计算剩余时长并保存到任务列表
      const remainingTime = totalSetTime - preciseElapsed;
      setUpdateTime(itemtask.id, remainingTime);
      // 更新初始已流逝时长为精确值
      setInitialTimer(preciseElapsed);
      setStartAt(null);
    } else {
      setStartAt(Date.now());
    }
  };

  function msToTime(duration) {
    if (duration < 0) {
      return 'Times up';
    }

    let seconds = Math.floor((duration / 1000) % 60);
    let minutes = Math.floor((duration / (1000 * 60)) % 60);

    minutes = minutes < 10 ? `0${minutes}` : minutes;
    seconds = seconds < 10 ? `0${seconds}` : seconds;
    return `${minutes}:${seconds}`;
  }

  return (
    <div className="timer">
      <PlayCircleTwoTone
        onClick={toggleTimer}
        twoToneColor="#cc9a9a"
        style={{ fontSize: '32px' }}
      />
      <span>{totalSetTime > 0 ? msToTime(countDown) : msToTime(elapsedTime)}</span>
    </div>
  );
}

关键修改点 #

• 消除计时偏差：暂停时直接用Date.now()计算精确的已流逝时间，不再依赖每秒更新的now状态，彻底解决1秒内的误差。
• 刷新状态保留：initialTimer的初始值通过总设置时长 - 剩余时长从itemtask反推，页面刷新时自动读取保存的任务数据，恢复之前的计时进度。
• 简化逻辑：重新梳理elapsedTime的计算逻辑，区分运行/暂停状态，代码更易维护。
• 优化钩子：移除useNow中未使用的cbRef回调逻辑，简化钩子实现。

setUpdateTime函数无需修改，其逻辑已能正确将剩余时间转换为分钟和秒数保存到任务列表中。

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