react.js - 请教一个react 中页面切换到后台，定时器刷新的问题？

Question

需求如下： 在页面上显示服务器的时间， 每隔十分钟与服务器同步一次，在此期间，前端使用定时器进行递增显示时间，在正常情况下是可以的。但是在页面切换到后台之后，由于浏览器的机制导致定时器执行比预期的慢，页面显示回来的时候，时间已经比预期的慢一点了，

let interTimer: any = 0
let hiddTime = 0
let hasLoading = true
const GetTime = () => {
  const [time, setTime] = useState((dayjs().valueOf())
  useEffect(() => {
    loadNTPTime()
    const inters = setInterval(
      () => {
        loadNTPTime()
      },
      1000 * 60 * 10,
    )
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible') {
        const diffTime = Math.floor((new Date().getTime() - hiddTime) / 1000)
        if (diffTime > 60 && hasLoading) {
          hasLoading = false
          loadNTPTime()
        }
      } else if (document.visibilityState === 'hidden') {
        hiddTime = new Date().getTime()
        hasLoading = true
      }
    })
    return () => {
      clearInterval(inters)
    }
  }, [])

  useEffect(() => {
    console.log(time) // 在页面切换后台后，再回来，这里不会执行了，页面也不显示更新了，但是定时器还是执行的
  }, [time])

  const loadNTPTime = async () => {
    const response = await http.get('/app/time')
    const { data } = formatResponse(response)
    if (data) {
      let millsecond = dayjs(data).valueOf()
      setTime(dayjs(data))
      if (interTimer) {
        clearInterval(interTimer)
      }
      interTimer = setInterval(() => {
        millsecond += 1000
        setTime(dayjs(millsecond))
      }, 1000)
    } else {
      setTime('--')
    }
  }
  return <div>{time}</div>
}

想通过页面切换后，重新加载服务器时间进行更新，但是无效果
最后使用了worker 进行刷新的。

Answer 1

浏览器会暂停后台标签页的脚本的执行。但是你可以监听页面进入后台和恢复前台的事件。