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

出現的 BUG 是：后端發現前端有很長一段時間都沒有向后端發起上報請求。

問題排查

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

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

在這里我跟大家科普一個監聽事件 visibilitychange，他可以用來監聽當前標簽頁頁面顯隱的切換。

圖片

于是我需要復現一下這個 BUG ，我簡單寫了以下的代碼，并且做這些事：

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

圖片

我先試著離開很短一段時間，再回去看，可以發現，控制臺的輸出還是很連續的，這說明離開很短時間，基本不會影響到定時器執行的連續性。

圖片

第二次我離開了一兩分鐘時間，可以看到定時器執行的連續性不正常了，這說明了當頁面隱藏的時候，定時器的執行有點類似于節流的感覺，從而導致不太連續。

圖片

定時器連續性的保證？

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

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

圖片

圖片

現在就能保證定時器的連續性執行了！

圖片