React项目中如何按创建时间延迟向太平洋时区用户展示事件数组？

是的，用setInterval定期检查数组的方案是可行的，但还有更高效精准的实现方式，下面分两种方案详细说明：

1. 基于setInterval的轮询方案（你提到的思路） #

• 核心逻辑：维护一个全量事件数组和一个当前展示的事件数组，每隔1-5秒遍历未展示的事件，对比当前太平洋时间（PT）与「事件ET创建时间+3小时」，如果当前时间已达到或超过延迟后的展示时间，就将该事件加入展示数组。
• 注意事项：
  • 给事件添加isDisplayed标记，避免重复检查已展示的事件，减少不必要的计算。
  • 轮询间隔别设置太小（比如1秒以内），不然会额外消耗性能，1-5秒的间隔完全能满足电视节目事件的展示精度要求。

2. 基于setTimeout的精准触发方案（更推荐） #

• 核心逻辑：针对每个事件单独计算延迟时间，直接设置定时器到点展示，无需定期轮询。
• 具体操作：
  1. 拿到事件数组后，对每个事件计算「ET创建时间+3小时」的PT展示时间。
  2. 对比当前PT时间与展示时间：
     • 若当前时间已过展示时间，直接加入展示数组；
     • 若还未到展示时间，计算时间差并设置setTimeout，到点后自动将事件加入展示数组。
  3. 如果是实时同步的新增事件（比如ET端实时生成后推送给PT端），每次新增事件时重复上述步骤即可。
• 优势：避免了无意义的定期轮询，性能更优，尤其是事件数量较多时效果明显。

React项目中的实现注意点 #

• 用useState管理展示事件数组，useEffect处理初始事件的定时器设置和实时事件的监听。
• 用useRef存储所有定时器ID，组件卸载时调用clearTimeout清理所有定时器，防止内存泄漏。

简单代码示例 #

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

const EventDisplay = ({ events }) => {
  const [displayedEvents, setDisplayedEvents] = useState([]);
  const timerRef = useRef([]);

  useEffect(() => {
    // 清理旧定时器
    timerRef.current.forEach(timer => clearTimeout(timer));
    timerRef.current = [];

    const now = Date.now();
    const PT_DELAY = 3 * 60 * 60 * 1000; // 3小时的毫秒数

    events.forEach(event => {
      const etCreateTime = new Date(event.etCreateTime).getTime();
      const ptDisplayTime = etCreateTime + PT_DELAY;
      const timeDiff = ptDisplayTime - now;

      if (timeDiff <= 0) {
        setDisplayedEvents(prev => [...prev, event]);
      } else {
        const timer = setTimeout(() => {
          setDisplayedEvents(prev => [...prev, event]);
        }, timeDiff);
        timerRef.current.push(timer);
      }
    });

    // 组件卸载时清理定时器
    return () => timerRef.current.forEach(timer => clearTimeout(timer));
  }, [events]);

  return (
    <div className="event-list">
      {displayedEvents.map(event => (
        <div key={event.id} className="event-item">
          {event.title} - {new Date(event.etCreateTime).toLocaleString()}
        </div>
      ))}
    </div>
  );
};

export default EventDisplay;

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