React中如何实现时钟暂停与从暂停时间重启的功能

你的核心问题在于直接存储格式化后的时间字符串，且每次更新都依赖当前系统时间，导致暂停后重启无法延续之前的时间。我们可以通过存储时间戳并手动模拟时间流逝来实现需求：

import "./App.css";
import { useEffect, useState } from "react";

function App() {
  // 存储时间戳（毫秒），初始为当前时间
  const [currentTimeStamp, setCurrentTimeStamp] = useState(Date.now());
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    // 如果处于暂停状态，不启动定时器
    if (isPaused) return;

    // 每秒给时间戳加1000毫秒，模拟时间流逝
    const timer = setInterval(() => {
      setCurrentTimeStamp(prevStamp => prevStamp + 1000);
    }, 1000);

    // 组件卸载或暂停状态变化时清除定时器
    return () => clearInterval(timer);
  }, [isPaused]);

  // 将时间戳格式化为本地时间字符串
  const displayTime = new Date(currentTimeStamp).toLocaleTimeString();

  return (
    <div className="m-2 p-2 flex">
      <h1 className="m-1 p-1">{displayTime}</h1>
      <button
        className="m-1 p-2 bg-slate-200 rounded-lg shadow-lg font-semibold"
        onClick={() => setIsPaused(!isPaused)}
      >
        {isPaused ? "Start" : "Pause"}
      </button>
    </div>
  );
}

export default App;

关键逻辑说明： #

• 用时间戳存储时间：相比格式化后的字符串，时间戳更方便进行加减计算，能精准控制时间的延续。
• 手动递增时间戳：暂停时定时器停止，时间戳不再变化；重启后定时器重新启动，时间戳每秒加1000毫秒，实现从暂停点继续计时的效果。
• 格式化为可读时间：在渲染时将时间戳转换为本地时间字符串，不影响显示效果。

这样修改后，点击暂停按钮时钟会停在当前显示的时间，再次点击Start就会从该时间点继续走，而不是跳转到当前系统时间。

内容的提问来源于stack exchange，提问作者Md. Shadab Hussain