由于浏览器的优化机制,在切换tab之后浏览器会把setInterval跟settimeout的执行效率降低,在浏览器窗口非激活的状态下会停止工作或者以极慢的速度工作。1000毫秒循环一次会变得越来越慢,3000,5000,甚至会停止循环,直到再次切回页面时激活,导致做一些商城活动倒计时之类功能时出现倒计时不准确等BUG。
1.可以通过监听 visibilitychange 来切出切回重新开启倒计时计算
const visibilitychange = () => {
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
console.log('页面离开')
} else {
console.log('页面回来')
}
});
}
这种方式在倒计数区域会有个一闪而过的错误时间展示
2.开启JS多线程web weoker,倒计时写在weborker里时,页面的tab不会影响到倒计时的计算
let webWorkDate = 100,
date = 100;
// 开启线程
const work = new Worker('worker.js');
setInterval(() => {
date--;
console.log('普通倒计数:', date);
}, 1000);
// 传输数据
work.postMessage({ time: webWorkDate });
console.log(work);
// 监听线程
work.onmessage = (event) => {
console.log();
console.log('Worker倒计数:', event.data.num);
if (event.data.num === 0) {
work.terminate(); //关闭线程
}
};
//worker.js
self.addEventListener(
'message',
function (e) {
setInterval(() => {
let num = e.data.time--;
self.postMessage({ num });
}, 1000);
},
false
);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。