React多标签页下如何同步setInterval定时任务避免重复执行

问题根因 #

你当前的实现是每个标签页在检测到登录态为真时，独立创建一个28分钟周期的定时器，标签页之间没有任何计时状态同步，因此新开标签页会从0开始重新计时，最终导致多标签页触发时机不一致。

推荐实现方案 #

不需要依赖后端接口，用浏览器原生localStorage+storage跨标签页通信能力，配合全局共享的触发时间戳作为统一计时基准，就能完全满足你的需求，具体逻辑：

• 把全局下次执行token刷新的时间戳存在localStorage中，所有标签页统一读取这个值作为计时依据，不再各自维护独立的28分钟长周期定时器
• 任意标签页检测到当前时间到达/超过存储的触发时间时，先将localStorage中的下次触发时间更新为「当前时间+28分钟」，再执行刷新逻辑；localStorage值变更会自动触发storage事件，通知其他所有同域标签页同步执行刷新操作
• 每个标签页只维护一个1秒间隔的轻量检查定时器，性能开销可忽略，同时能规避浏览器对后台标签页长周期定时器的节流延迟问题

修正后的代码 #

const TOKEN_REFRESH_INTERVAL = 28 * 60 * 1000; // 28分钟间隔
const NEXT_REFRESH_TS_KEY = 'global_next_token_refresh_ts';

const isLogged = useSelector((state) => state.userReducer.loggedIn);
const checkTimerRef = useRef(null);

const executeTokenRefresh = useCallback(() => {
  // 更新全局下次触发时间，自动通知其他标签页
  const nextTriggerTs = Date.now() + TOKEN_REFRESH_INTERVAL;
  localStorage.setItem(NEXT_REFRESH_TS_KEY, String(nextTriggerTs));
  dispatch(refreshUserToken());
}, [dispatch]);

useEffect(() => {
  // 未登录状态：清理定时器、清除全局时间戳
  if (!isLogged) {
    if (checkTimerRef.current) {
      clearInterval(checkTimerRef.current);
      checkTimerRef.current = null;
    }
    localStorage.removeItem(NEXT_REFRESH_TS_KEY);
    return;
  }

  // 登录初始化：如果没有已存在的全局触发时间，初始化一个
  const storedTs = localStorage.getItem(NEXT_REFRESH_TS_KEY);
  if (!storedTs) {
    localStorage.setItem(NEXT_REFRESH_TS_KEY, String(Date.now() + TOKEN_REFRESH_INTERVAL));
  }

  // 监听其他标签页触发的刷新通知
  const handleStorageEvent = (e) => {
    if (e.key === NEXT_REFRESH_TS_KEY && e.newValue) {
      // 其他标签页已更新触发时间，说明刚执行完刷新，当前页同步执行
      dispatch(refreshUserToken());
    }
  };
  window.addEventListener('storage', handleStorageEvent);

  // 每秒检查一次是否到达触发时间
  checkTimerRef.current = setInterval(() => {
    const currentStoredTs = Number(localStorage.getItem(NEXT_REFRESH_TS_KEY));
    if (!currentStoredTs || Date.now() >= currentStoredTs) {
      executeTokenRefresh();
    }
  }, 1000);

  return () => {
    clearInterval(checkTimerRef.current);
    window.removeEventListener('storage', handleStorageEvent);
  };
}, [isLogged, executeTokenRefresh]);

方案适配性说明 #

• 全局所有标签页共享同一个触发时间戳，不会出现新标签页重置计时的问题：比如第一个标签页登录后已停留20分钟，localStorage中存储的触发时间是8分钟后，此时新开标签页会直接读取这个已存在的时间戳，不会重新开始28分钟计时
• 到达触发时间时，最先检测到时间点的标签页会更新localStorage值，通过storage事件在毫秒级通知其他所有标签页同步执行dispatch，所有页面的触发时差不超过1秒，完全满足同步要求
• 自动处理边界场景：用户登出时会清除全局时间戳，避免影响下次登录；所有标签页关闭后再重新打开登录，会自动初始化新的计时基准，无旧值残留问题

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