setInterval不定时执行

201 阅读1分钟

1.异常场景

setInterval(fn, 5000)//每隔5秒调用fn方法 问题:

运行时发现在用户切换到不同的选项卡、电脑锁屏后定时器未按时调用。

2.问题产生原因

当页面变为非活动状态时,WebKit 会自动采取措施来节省电量
 包括:
        requestAnimationFrame停止。
        CSS 和 SVG 动画被暂停。
        计时器受到限制。

3.页面变为非活动状态(不是用户的主要焦点)的情况

 用户切换到不同的选项卡。
 用户切换到不同的应用程序。
 浏览器窗口最小化。
 浏览器窗口可见但不是焦点窗口。
 浏览器窗口位于另一个窗口的后面。
 窗口所在的空间不是当前空间。

4.解决方案

 使用 Web Workers。浏览器窗口在非激活状态时也让setTimeoutsetInterval有效不休眠的功能
 web worker 是运行在后台的 JavaScript,不会影响页面的性能。

5.使用方式

参考:[www.runoob.com/html/html5-…]