1.异常场景
setInterval(fn, 5000)//每隔5秒调用fn方法 问题:
运行时发现在用户切换到不同的选项卡、电脑锁屏后定时器未按时调用。
2.问题产生原因
当页面变为非活动状态时,WebKit 会自动采取措施来节省电量
包括:
requestAnimationFrame停止。
CSS 和 SVG 动画被暂停。
计时器受到限制。
3.页面变为非活动状态(不是用户的主要焦点)的情况
用户切换到不同的选项卡。
用户切换到不同的应用程序。
浏览器窗口最小化。
浏览器窗口可见但不是焦点窗口。
浏览器窗口位于另一个窗口的后面。
窗口所在的空间不是当前空间。
4.解决方案
使用 Web Workers。浏览器窗口在非激活状态时也让setTimeout、setInterval有效不休眠的功能
web worker 是运行在后台的 JavaScript,不会影响页面的性能。
5.使用方式