setInterval设置15分钟不生效但10秒正常，如何实现30分钟、1小时长定时

问题根因 #

• 你的useEffect没有传入第二个依赖数组参数，这会导致每次组件重渲染时都会先清除上一次的定时器，再重新创建一个新的定时器。10秒的间隔较短，大概率能在两次组件重渲染之间触发，所以看起来正常；但15分钟的间隔很长，只要在这15分钟内组件发生过任意一次重渲染，定时器就会被重置，永远等不到触发时机。
• 其次现代浏览器针对未激活的后台标签页，会自动限制setInterval的执行频率，最小间隔通常被限制为1分钟甚至更长，同时设备休眠、浏览器内存回收也可能中断长时长定时器。

解决方法 #

1. 基础修复：补全useEffect依赖 #

如果你的定时器只需要在组件挂载时初始化一次，给useEffect添加空依赖数组即可：

const timeInterval = 900_000 // 15分钟
useEffect(() => {
  const refetch = setInterval(() => {
    console.log("Refetch");
  }, timeInterval)
  return () => clearInterval(refetch)
}, []) // 空依赖表示仅组件挂载/卸载时执行

这个方案仅适用于页面保持激活、组件不会频繁重渲染的场景。

2. 更稳定的长间隔实现：时间戳校准 #

为了避免浏览器后台节流、定时器漂移导致的触发不准，可以用短间隔轮询+时间差校验的方案：

const TARGET_INTERVAL = 1800_000 // 30分钟，可自行修改为3600_000即1小时
useEffect(() => {
  // 记录上一次执行的时间戳
  let lastRunTime = Date.now()
  // 用1分钟的短间隔做校验，不受浏览器后台节流的最小间隔限制
  const timer = setInterval(() => {
    const now = Date.now()
    if (now - lastRunTime >= TARGET_INTERVAL) {
      console.log("Refetch")
      lastRunTime = now
    }
  }, 60_000) // 1分钟校验一次，可根据需求调整
  return () => clearInterval(timer)
}, [])

3. 后台也能稳定运行的方案：Web Worker #

如果需要定时器在标签页后台、浏览器最小化状态下也能准点触发，可以把定时器逻辑放到独立的Web Worker中运行，Worker线程不受主线程的标签页休眠策略限制。

4. 生产级推荐方案 #

如果你的定时逻辑是用来做数据同步、更新这类业务功能，更推荐用后端推送方案（WebSocket、SSE）替代前端定时器，前端定时器天然受页面生命周期影响，只要用户关闭页面就会停止运行，无法保证100%触发。

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