关于setInterval切换页面时不工作

前言

这是在做追逐小游戏时遇到的一个问题,其实就是个简易的计时器效果(00:00 ~ 30:00),理所当然的用 写了。写完之后发现,在切换页面或者窗口的时候,计时器不会继续计时,直到切换回该页面的时候才会继续进行。同时页面上还有 css 动画,在切走页面时动画仍会继续进行,于是 计时器就和 css 动画就不同步了。

最初的想法就是把 动画在切换页面的时候暂停一下,等到切换回该页面的时候继续播放动画,也就是通过监听 、 或 等事件,把 这个属性设置为 或者 ,代码如下:

不过在尝试了之后感觉不是很稳定,就是以不同方式切走该页面有时会无效。而且产品的要求是最好在切走页面的时候也能够继续计时。所以就开始各种百度啦!!!得到的结果是:喔,原来是浏览器自身的特性,可能是出于性能考虑吧,如果前窗口处于非激活状态时, 就会停止运行或者以较慢的速度运行,当然这不是绝对的,还和所设置的时间间隔有关,如果时间间隔较长(比如2000ms),切换页面时 还是会继续进行的,如果时间间隔较短(如几十毫秒), 就会停止工作,具体哪个时间节点我还不是很清楚。而我这个计时器时间间隔是10ms,所以切换页面浏览器是不工作的。

当时就一股脑的想着怎样让 一直工作呢,忽然想起了 H5 有个 web Worker 这个东西,它可以开启一个子线程,该线程能够独立于主线程工作,并进行通信。也就是说我们可以把计时的操作放在子线程中然后向页面回传数据,而主线程只要负责接收数据并进行展示不就可以了么,于是就尝试了一下,嗯,果然可以,在 Safari、火狐和 Chrome 下切走页面的时候 依然能够运行,所以这个问题就这样解决了,代码如下:

嗯,一切好像都挺合理。。。直到后来,现场演示的时候出现了bug,计时器一直在00:00的状态,没有变化,这个就很尴尬了,想必应该是 没有工作吧,可是为什么不工作呢,噢,原来是演示的时候用了 IE 浏览器,应该是它不支持 ,所以得另辟蹊径了。。。后来的解决方案是通过 来配合计时,这样切换回页面的时候,由于当前时间是会变化的,我们就可以用现在的时间 减去起始的时间 begin 得到的时间差 time 来计时,嗯,应该是个不错的方案了,至少目前没有什么太大问题,具体代码如下:

后序

可用 来模拟 的效果,好处在于 能避免 产生的叠加效果,能够更为准确的控制时间间隔,代码如下:

要养成清除计时器的习惯,避免不必要的性能损耗, 和 每次执行其实会返回一个 id 值(这个 id 就是个数字),然后我们可以通过这个 id 标识来清除计时器,代码如下:

当然我们可能会遇到这样的一种情况:当页面 用的较多时,我们在离开或者跳转页面前若是要清除所有的计时器要怎么办?这时我们可以对 生成的所有 timeId 进行统一管理,简单来说就是把每个 timeId 都放入一个数组中,页面离开或跳转时再遍历进行 , 也是一样的道理,具体代码如下:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181101G1OWF200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券