最近組員遇到了一個(gè) BUG，我們的需求是這樣的：前端需要通過輪詢的方式，每隔一段時(shí)間去做一些邏輯處理，并向后端發(fā)送請求上報(bào)。

出現(xiàn)的 BUG 是：后端發(fā)現(xiàn)前端有很長一段時(shí)間都沒有向后端發(fā)起上報(bào)請求。

問題排查

我們的的輪詢是通過 setInterval 定時(shí)器去完成的，那么為啥定時(shí)器里的邏輯沒執(zhí)行呢？

通過向用戶詢問，我們得知了用戶有很長一段時(shí)間沒有去看這個(gè)前端頁面，并且把這個(gè)頁面給隱藏了。

在這里我跟大家科普一個(gè)監(jiān)聽事件 visibilitychange，他可以用來監(jiān)聽當(dāng)前標(biāo)簽頁頁面顯隱的切換。

圖片

于是我需要復(fù)現(xiàn)一下這個(gè) BUG ，我簡單寫了以下的代碼，并且做這些事：

• 先在頁面待一會
• 隱藏頁面一段時(shí)間
• 再顯示頁面，并查看控制臺的輸出是否連續(xù)

圖片

我先試著離開很短一段時(shí)間，再回去看，可以發(fā)現(xiàn)，控制臺的輸出還是很連續(xù)的，這說明離開很短時(shí)間，基本不會影響到定時(shí)器執(zhí)行的連續(xù)性。

圖片

第二次我離開了一兩分鐘時(shí)間，可以看到定時(shí)器執(zhí)行的連續(xù)性不正常了，這說明了當(dāng)頁面隱藏的時(shí)候，定時(shí)器的執(zhí)行有點(diǎn)類似于節(jié)流的感覺，從而導(dǎo)致不太連續(xù)。

圖片

定時(shí)器連續(xù)性的保證？

其實(shí)瀏覽器這么做也是有他的道理的，畢竟當(dāng)頁面隱藏的時(shí)候，說明這個(gè)頁面對于用戶當(dāng)前來說，不太重要了，所以適當(dāng)減少一些代碼邏輯的運(yùn)行，節(jié)省性能，也是無可厚非的！

但是如果你想一直保證定時(shí)器的連續(xù)性，還是有辦法做到的，可以用到我們的老朋友：Web Worker。

圖片

圖片

現(xiàn)在就能保證定時(shí)器的連續(xù)性執(zhí)行了！

圖片