移動端倒計時切到後臺切回來不繼續執行的問題

問題描述

這個倒計時按鈕，若是頁面在移動端切到後臺和切回來，倒計時中止運行。
可是在pc端沒有這個問題。
倒計時代碼以下

let downCount = () => {
                        if (this.count >= 1) {
                            this.count--;
                        } else {
                            clearInterval(timer);
                        }
                    };
timer = setInterval(downCount , 1000);

知識點

頁面切到後臺會觸發 visibilitychange 事件，經過document監聽器能夠捕獲這個事件
Document.visibilityState 能夠得到當前狀態

• visible : 頁面內容至少是部分可見。 在實際中，這意味着頁面是非最小化窗口的前景選項卡。
• hidden : 頁面內容對用戶不可見。 在實際中，這意味着文檔能夠是一個後臺標籤，或是最小化窗口的一部分，或是在操做系統鎖屏激活的狀態下。
• prerender : 頁面內容正在被預渲染且對用戶是不可見的(被document.hidden當作隱藏). 文檔可能初始狀態爲 prerender，但毫不會從其它值轉爲該值。 註釋：瀏覽器支持是可選的。

https://developer.mozilla.org...

解決思路

1. 倒計時開始啓動，增長監聽器，監聽visibilitychange事件
2. 切換到後臺，觸發visibilitychange事件，記錄開始時間
3. 切換到前臺，觸發visibilitychange事件，記錄結束時間
4. 用結束時間 - 開始時間，當前值減去時間差就是切換到後臺走的數值，而後繼續運行倒計時。

相關代碼

let downCount = () => {
                        if (this.count >= 1) {
                            this.count--;
                        } else {
                            clearInterval(timer);
                        }
                    };
document.addEventListener('visibilitychange',() => {
    if(document.visibilityState == 'hidden'){
        clearInterval(timer);//爲了兼容pc，pc切換到後臺繼續運行
        start= new Date().getTime();
    } else  if( document.visibilityState == 'visible'){
        end = new Date().getTime();
        s2 =Math.floor( (end - start)/1000);
        this.count =  this.count - s2;
        timer = setInterval(downCount , 1000);
        document.removeEventListener('visibilitychange');
    }
})
timer = setInterval(downCount , 1000);