前言

　　很多的問題就在實(shí)踐中得到解決。

　　本文主要說的就是js定時(shí)器，setInterval和setTimeout，作為我們?nèi)粘ｉ_發(fā)經(jīng)常使用到的方法。我們先給大家下面一個(gè)例子：

　　setInterval(() => {
　　console.log('1');
　　}, 500);

　　這段代碼就是每過500ms打印一次1（實(shí)際運(yùn)行還需要考慮js的宏任務(wù)和微任務(wù)的執(zhí)行時(shí)間，定時(shí)器的間隔時(shí)間是500ms，但是定時(shí)器中的方法觸發(fā)可能需要在宏任務(wù)隊(duì)列中排隊(duì)，不一定會(huì)在500ms的時(shí)候觸發(fā)，關(guān)于Event Loop的基礎(chǔ)內(nèi)容不在本文討論之內(nèi)）。

　　但要是從當(dāng)前頁(yè)面切換到另一個(gè)標(biāo)簽頁(yè)，或者把瀏覽器最小化了，這時(shí)候，這個(gè)頁(yè)面定時(shí)器的間隔時(shí)間還是500ms？

　　本文將測(cè)試setInterval、setTimeout、requestAnimationFrame這三個(gè)方法在瀏覽器可見以及不可見狀態(tài)下的表現(xiàn)，我的測(cè)試瀏覽器以及版本是谷歌(86.0.4240.193),火狐(81.0.2),ie11。

　　瀏覽器可見和不可見狀態(tài)

　　我要知道瀏覽器的可見和不可見狀態(tài)的切換會(huì)觸發(fā)visibilitychange事件，這樣就可以通過監(jiān)聽這個(gè)事件來判別瀏覽器的可見狀態(tài)。

　　document.addEventListener("visibilitychange", function() {
　　console.log(document.visibilityState);
　　});

　　document.visibilityState有三個(gè)值

　　hidden：頁(yè)面徹底不可見。

　　visible：頁(yè)面至少一部分可見。

　　prerender：頁(yè)面即將或正在渲染，處于不可見狀態(tài)。要知道重點(diǎn)關(guān)注hidden，主要就是它可以在瀏覽器切換當(dāng)前頁(yè)面到另外一個(gè)標(biāo)簽頁(yè)或者把瀏覽器最小化的時(shí)候，document.visibilityState就會(huì)是hidden值。由此可以使用document.hidden，它返回一個(gè)布爾值，為true的時(shí)候，說明當(dāng)前瀏覽器是不可見狀態(tài)。

　　setInterval

　　我們先來測(cè)試setInterval，代碼如下

　<button id="btn">開始計(jì)時(shí)</button>
　　// 兼容ie寫法
　　document.getElementById('btn').addEventListener('click', function() {
　　setInterval(function() {
　　const myDate = new Date();
　　const currentDate = myDate.getMinutes() + '分'+ myDate.getSeconds() + '秒' + myDate.getMilliseconds() + '豪秒';
　　// 每次循環(huán)打印當(dāng)前時(shí)間
　　console.log(currentDate);
　　}, 500);
　　});
　　// 瀏覽器可見狀態(tài)切換事件
　　document.addEventListener('visibilitychange', function() {
　　if(document.hidden) {
　　console.log('頁(yè)面不可見');
　　}
　　});

　　定時(shí)器間隔是500ms，谷歌瀏覽器如下

　　我們發(fā)現(xiàn)，當(dāng)頁(yè)面不可見之后，定時(shí)器的間隔變成了1s。接下來，我們把定時(shí)器間隔改成2s來試下。

　　前后間隔時(shí)間一致。

　　接下來測(cè)試一下火狐和ie。這里列出的圖片都是500ms和2s的例子。

　　ie瀏覽器

　　在不斷的測(cè)試中，谷歌瀏覽器中，當(dāng)頁(yè)面處于不可見狀態(tài)時(shí)，setInterval的最小間隔時(shí)間會(huì)被限制為1s?；鸷鼮g覽器的setInterval和谷歌特性一致，但是ie瀏覽器沒有對(duì)不可見狀態(tài)時(shí)的setInterval進(jìn)行性能優(yōu)化，不可見前后間隔時(shí)間不變。

　　setTimeout

　　接下來是setTimeout

　function timer() {
　　setTimeout(function() {
　　const myDate = new Date();
　　const currentDate = myDate.getMinutes() + '分'+ myDate.getSeconds() + '秒' + myDate.getMilliseconds() + '豪秒';
　　console.log(currentDate);
　　timer();
　　}, 500)
　　}
　　// 兼容ie寫法
　　document.getElementById('btn').addEventListener('click', function() {
　　timer();
　　});

　　同樣先來看看在谷歌瀏覽器中的表現(xiàn)（還是500ms和2s）

　　通過對(duì)比，可以知道在谷歌瀏覽器中，500ms的間隔，setTimeout和setInterval表現(xiàn)一致，都是最小間隔限制為1s。但是2s隔間的測(cè)試結(jié)果出現(xiàn)了分歧，頁(yè)面不可見之后，間隔變成了3s。繼續(xù)經(jīng)過多次的測(cè)試，如下，左圖的間隔時(shí)間為990ms，右圖的間隔時(shí)間為1s。

　　不可見狀態(tài)下，左圖中的990ms間隔時(shí)間變?yōu)?s，右圖中的1s間隔時(shí)間變?yōu)?s。

　　我們?cè)賮砜纯椿鸷?00ms和2s）

　　火狐瀏覽器不可見狀態(tài)下,左圖中的500ms變?yōu)?s，右圖中的2s保持不變。

　　再來看看ie瀏覽器(500ms)

　　顯而易見并無改動(dòng)?！　?/p>

　　在谷歌瀏覽器中，setTimeout在瀏覽器不可見狀態(tài)下間隔低于1s的會(huì)變?yōu)?s，大于等于1s的會(huì)變成N+1s的間隔值。

　　火狐瀏覽器下setTimeout的最小間隔時(shí)間會(huì)變?yōu)?s,大于等于1s的間隔不變。ie瀏覽器在不可見狀態(tài)前后的間隔時(shí)間不變。

　　requestAnimationFrame

　　raf是瀏覽器提供的一個(gè)更流暢的處理動(dòng)畫的方法，它會(huì)在下次瀏覽器GUI繪制頁(yè)面的時(shí)候運(yùn)行傳入的方法。GUI繪制頁(yè)面的頻率跟顯示器的刷新率有關(guān)，普通顯示器的刷新率是60hz，因此raf在一秒之內(nèi)需要運(yùn)行60次，間隔四舍五入大概是17ms。

　function timer() {
　　const myDate = new Date();
　　const currentDate = myDate.getMinutes() + '分'+ myDate.getSeconds() + '秒' + myDate.getMilliseconds() + '豪秒';
　　console.log(currentDate);
　　window.requestAnimationFrame(timer)
　　}
　　// 兼容ie寫法
　　document.getElementById('btn').addEventListener('click', function() {
　　timer();
　　});

　　我們來看看不同瀏覽器下面的表現(xiàn)：

　　谷歌瀏覽器

　　火狐瀏覽器

　　ie瀏覽器

　　我們可以發(fā)現(xiàn)，谷歌瀏覽器和ie瀏覽器當(dāng)瀏覽器狀態(tài)為不可見時(shí)，raf方法將停止執(zhí)行?；鸷鼮g覽器當(dāng)狀態(tài)變?yōu)椴豢梢姇r(shí)，會(huì)在間隔是1s,2s,4s,8s,16s,32s...這樣的順序下去執(zhí)行raf方法。

　　匯總

　　當(dāng)頁(yè)面處于不可見狀態(tài)時(shí)，谷歌瀏覽器中，當(dāng)頁(yè)面處于不可見狀態(tài)時(shí)，setInterval的最小間隔時(shí)間會(huì)被限制為1s。火狐瀏覽器的setInterval和谷歌特性一致。ie瀏覽器沒有對(duì)不可見狀態(tài)時(shí)的setInterval進(jìn)行性能優(yōu)化，不可見前后間隔時(shí)間不變。

　　在谷歌瀏覽器中，setTimeout在瀏覽器不可見狀態(tài)下間隔低于1s的會(huì)變?yōu)?s，大于等于1s的會(huì)變成N+1s的間隔值?；鸷鼮g覽器下setTimeout的最小間隔時(shí)間會(huì)變?yōu)?s,大于等于1s的間隔不變。ie瀏覽器在不可見狀態(tài)前后的間隔時(shí)間不變。

　　谷歌瀏覽器和ie瀏覽器當(dāng)瀏覽器狀態(tài)為不可見時(shí)，raf方法將停止執(zhí)行。火狐瀏覽器當(dāng)狀態(tài)變?yōu)椴豢梢姇r(shí)，會(huì)在間隔是1s,2s,4s,8s,16s,32s...這樣的順序下去執(zhí)行raf方法。

　　解決方法

　　在一些定時(shí)器小于1s的倒計(jì)時(shí)的頁(yè)面中，如果用戶切換到了其他標(biāo)簽頁(yè)。再切回去的時(shí)候，頁(yè)面上顯示的倒計(jì)時(shí)時(shí)間其實(shí)是錯(cuò)誤的，這可是一個(gè)大的bug,要如何解決？

　　我們處理可以調(diào)取后臺(tái)接口或者websocket連接之外，還有一個(gè)更好的方法：webWorkers。而且webWorkers還可以解決一個(gè)頁(yè)面存在多個(gè)定時(shí)器時(shí)候間隔時(shí)間誤差較大的問題。

　　直接上例子

　　document.getElementById('btn').addEventListener('click', function() {
　　var w = new Worker('demo_workers.js');
　　w.onmessage = function(event){
　　console.log(event.data);
　　};
　　});
　　//瀏覽器切換事件
　　document.addEventListener('visibilitychange', function() {
　　if(document.hidden) {
　　console.log('頁(yè)面不可見');
　　}
　　});

　// demo_workers.js
　　setInterval(function() {
　　const myDate = new Date();
　　const currentDate = myDate.getMinutes() + '分'+ myDate.getSeconds() + '秒' + myDate.getMilliseconds() + '豪秒';
　　postMessage(currentDate);
　　}, 500);

　　實(shí)際結(jié)果

　　間隔保持一致。

　   很多問題看似在“吹毛求疵”，但何嘗不是一種進(jìn)步。