由於瀏覽器的優化機制,在切換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
);