setTimeout页面失活后失效

253 阅读1分钟

场景: h5的首页是一个倒计时显示,用户打开后未关闭让页面停留至后台,重新进入首页后倒计时仍是上一次离开页面显示的倒计时时间(页面没刷新)。


原因: setTimeout定时器在浏览器最小化进入后台后,或页面长时间处于休眠状态(即页面不显示在最前面)的情况下,页面内的定时器也会进入休眠,以减少浏览器的缓存占用以及电脑的内存占用,导致倒计时显示不准确。


解决: document.addEventListener('visibilitychange', fn) 监听页面当期那是否处于活跃状态

    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState === 'hidden') {
          // console.log('页面失活')
        }
        if (document.visibilityState === 'visible') {
					// console.log('页面活跃')
          // 初始化刷新倒计时
          // init()
				}
      })