React+NodeJS多谜语跨页面持久化倒计时实现咨询

别搞服务端维护内存剩余时长数组的方案，服务重启就丢数据，还要常驻定时任务扫，吃力不讨好。最稳的实现是完全基于时间戳做无状态计算，前后端逻辑都简单，精度也够。

服务端（NodeJS侧）实现 #

• 先调整谜语表字段，只需要加1个字段就行，原有total_duration（总时长，单位秒）保留：
  • 新增open_time：TIMESTAMP类型，存储谜语被切换为「开放」状态时的服务器时间戳，未开放的谜语该字段为NULL
• 废弃所有服务端每秒递减时长的逻辑，剩余时长完全靠实时计算：剩余时长 = 总时长 - (当前服务器时间 - 谜语开放时间戳)，计算结果小于0就直接判定谜语已结束，按需更新状态即可。
• 接口只需要3个核心接口：
  • 开放谜语接口：校验出题人权限后，把对应谜语的状态改为开放，同时写入当前服务器时间戳到open_time字段
  • 谜语详情接口：返回谜语基础信息、open_time、total_duration、当前服务器时间戳、已提交答案列表（按权限返回：出题人返回所有答案；普通用户未提交答案时不返回其他用户答案，提交后正常返回）
  • 提交答案接口：依次校验「谜语是否为开放状态」「当前用户是否已提交过该谜语答案」「剩余时长是否大于0」，全部通过才写入答案表，给用户ID+谜语ID加唯一索引，从数据库层面限制单用户单谜语只能提交1次
• 答案实时更新不用卡1秒轮询，用2-3秒间隔轮询就行，人眼感知不到差异，还能降服务器压力；要更低延迟就直接上SSE（服务端推送），有新答案提交时主动推给前端，比轮询省资源。

前端（React侧）实现 #

先点出你之前代码的两个核心问题：

1. setInterval(decreaseDuration(),1000)写法错误，你直接执行了decreaseDuration函数，传给setInterval的是函数执行结果（undefined），定时器根本没正常注册
2. 你直接修改了copy数组里的对象属性，React检测不到状态变更，不会触发重渲染，所以只有重新打开页面才能看到变化

前端不要自己维护本地时长递减逻辑，切后台、页面跳转、用户修改本地时间都会导致计时不准，正确实现逻辑如下：

• 拉取谜语详情时，拿到服务端返回的服务器当前时间戳、open_time、total_duration，同时记录拉取接口时的本地时间戳，用来计算本地和服务端的时间偏移，避免用户本地时间不准导致的计时错误
• 不用每秒拉接口，只需要本地注册1个1秒间隔的定时器更新当前本地时间，每次更新时基于时间偏移算出当前服务端时间，再计算剩余时长触发重渲染就行，多个开放谜语就遍历批量计算，天然支持并行计时
• 提示逻辑直接基于计算出的剩余时长判断：
  • 剩余时长 < 总时长50% 且 >= 总时长25%：展示第一条提示
  • 剩余时长 < 总时长*25%：同时展示两条提示
• 组件卸载时一定要清除定时器，避免内存泄漏

参考实现代码：

import { useState, useEffect, useRef } from 'react';

function RiddleCard({ riddleId, isCreator, userId }) {
  const [riddleInfo, setRiddleInfo] = useState(null);
  const [localNow, setLocalNow] = useState(Date.now());
  const timerRef = useRef(null);
  const pollRef = useRef(null);

  // 拉取谜语最新数据
  const loadRiddleData = async () => {
    const resp = await fetch(`/api/riddles/${riddleId}`);
    const data = await resp.json();
    setRiddleInfo({
      ...data,
      fetchLocalTime: Date.now() // 记录拉取时的本地时间，算偏移用
    });
  };

  useEffect(() => {
    loadRiddleData();
    // 1秒更新一次本地时间，触发倒计时重渲染
    timerRef.current = setInterval(() => {
      setLocalNow(Date.now());
    }, 1000);
    // 3秒轮询一次最新答案、谜语状态
    pollRef.current = setInterval(() => {
      loadRiddleData();
    }, 3000);

    // 组件卸载清定时器
    return () => {
      clearInterval(timerRef.current);
      clearInterval(pollRef.current);
    };
  }, [riddleId]);

  if (!riddleInfo) return <div>加载中...</div>;

  // 计算当前服务端时间，消除本地时间不准的影响
  const currentServerTime = riddleInfo.serverTime + (localNow - riddleInfo.fetchLocalTime);
  const remainSeconds = Math.max(0, Math.round(riddleInfo.totalDuration - (currentServerTime - riddleInfo.openTime)));
  const isEnded = remainSeconds <= 0;
  const hasSubmitted = riddleInfo.submittedUsers.includes(userId);

  return (
    <div className="riddle-card">
      <h3>{riddleInfo.title}</h3>
      <div className="countdown">剩余时间：{remainSeconds}秒</div>

      {/* 提示区域 */}
      {!isEnded && remainSeconds < riddleInfo.totalDuration * 0.5 && (
        <div className="tip">提示1：{riddleInfo.tip1}</div>
      )}
      {!isEnded && remainSeconds < riddleInfo.totalDuration * 0.25 && (
        <div className="tip">提示2：{riddleInfo.tip2}</div>
      )}

      {/* 答案区域：出题人/已提交用户可见 */}
      {(isCreator || hasSubmitted) && !isEnded && (
        <div className="answer-list">
          <h4>实时提交答案</h4>
          {riddleInfo.answers.map(item => (
            <div key={item.id}>{item.userName}: {item.content}</div>
          ))}
        </div>
      )}

      {/* 答题区域：未提交的普通用户可见 */}
      {!isCreator && !hasSubmitted && !isEnded && (
        <div className="submit-area">
          {/* 答案提交表单，提交成功后重新拉取谜语数据即可 */}
        </div>
      )}

      {isEnded && <div className="end-tip">本轮答题已结束</div>}
    </div>
  );
}

export default RiddleCard;

注意事项 #

• 前端的倒计时仅做展示用，所有核心校验（是否能提交答案、谜语是否结束）全部以后端计算结果为准，避免用户改本地时间作弊
• 不需要在答案表加额外时间戳字段，所有时间计算都以谜语的open_time为基准即可，逻辑简单没有冗余数据
• 这套方案完全不依赖内存存储状态，不管是页面跳转、刷新、还是服务端重启，计时结果都是准确的，不需要额外做跨页面状态同步

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