setTimeout和setInterval的程序休眠問題

問題

在咱們使用到setTimeoutout或者setInterval的時候，咱們將瀏覽器最小化，過了一段時間後再打開，發現setTimeou/setInterval會暫時進入休眠狀態，但並非不執行程序，它會把setInterval/setTimeout的回調函數放在隊列中,等瀏覽器再次打開的時候，一瞬間所有執行。這樣就會出現一系列的問題，好比我在作一個彈幕的組件，使用setTimeout控制彈幕的發射，可是瀏覽器縮小後，過了好久打開，就會發現一會兒不少彈幕出來，形成彈幕重疊。

解決方法

若是頁面是不可見的時候，那麼咱們就清除定時器，若是頁面可見的時候，那麼咱們從新開啓定時器

在這以前，咱們先了解一下3個方法：

• document.onvisibilitychange：只要頁面中發生變化，無論是切換到其餘頁面仍是把瀏覽器縮小，都會觸發這個事件。
• document.hidden.這個是指前頁面不是當前頁面的時候，不然爲false
• document.visibilityState。

這個屬性有四個值，分爲是：visible，hidden，prerender，unloaded

visible 表示當前網頁是可見或者是部分可見的。

hidden：當前網頁是不可見的

prerender 網頁內容被預渲染而且用戶不可見

unloaded 若是文檔被卸載，那麼這個值將被返回

以上，實現就能夠經過如下解決這個問題：

document.onvisibilitychange = function () {
    if (document.visibilityState == "visible") { 
        timer = setInterval(slidemove, 1000); 
    }
    else {
        clearInterval(timer);
    }
}
複製代碼

以上方法感受仍是有兼容性問題的，這個能夠細細研究。

另外

若是你是在小程序中，那麼能夠利用好微信小程序的生命週期。

onShow() {
    _this.timerCheck = setTimeout(function () {}, 1000);
},
onHide() {
    clearTimeout(_this.timerCheck);
}
複製代碼