資訊專欄INFORMATION COLUMN
摘要：問題描述這個倒計時按鈕，如果頁面在移動端切到后臺和切回來，倒計時停止運行。相關(guān)代碼為了兼容，切換到后臺繼續(xù)運行
問題描述
這個倒計時按鈕，如果頁面在移動端切到后臺和切回來，倒計時停止運行。
但是在pc端沒有這個問題。
倒計時代碼如下
let downCount = () => {
if (this.count >= 1) {
this.count--;
} else {
clearInterval(timer);
}
};
timer = setInterval(downCount , 1000);
知識點
頁面切到后臺會觸發(fā) visibilitychange 事件，通過document監(jiān)聽器可以捕獲這個事件
Document.visibilityState 可以獲得當前狀態(tài)
visible : 頁面內(nèi)容至少是部分可見。 在實際中，這意味著頁面是非最小化窗口的前景選項卡。
hidden : 頁面內(nèi)容對用戶不可見。 在實際中，這意味著文檔可以是一個后臺標簽，或是最小化窗口的一部分，或是在操作系統(tǒng)鎖屏激活的狀態(tài)下。
prerender : 頁面內(nèi)容正在被預(yù)渲染且對用戶是不可見的(被document.hidden當做隱藏). 文檔可能初始狀態(tài)為 prerender，但絕不會從其它值轉(zhuǎn)為該值。 注釋：瀏覽器支持是可選的。
https://developer.mozilla.org...
解決思路倒計時開始啟動，增加監(jiān)聽器，監(jiān)聽visibilitychange事件
切換到后臺，觸發(fā)visibilitychange事件，記錄開始時間
切換到前臺，觸發(fā)visibilitychange事件，記錄結(jié)束時間
用結(jié)束時間 - 開始時間，當前值減去時間差就是切換到后臺走的數(shù)值，然后繼續(xù)運行倒計時。
相關(guān)代碼let downCount = () => {
if (this.count >= 1) {
this.count--;
} else {
clearInterval(timer);
}
};
document.addEventListener("visibilitychange",() => {
if(document.visibilityState == "hidden"){
clearInterval(timer);//為了兼容pc，pc切換到后臺繼續(xù)運行
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);
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98867.html
摘要：馬蜂窩旅游歷經(jīng)幾十個版本的開發(fā)迭代，在啟動流程上積累了一定的技術(shù)債務(wù)。我們定義啟動廣告曝光率啟動廣告曝光啟動廣告加載。 增長、活躍、留存是移動 App 的常見核心指標，直接反映一款 App 甚至一個互聯(lián)網(wǎng)公司運行的健康程度和發(fā)展動能。啟動流程的體驗決定了用戶的第一印象，在一定程度上影響了用戶活躍度和留存率。因此，確保啟動流程的良好體驗至關(guān)重要。 「馬蜂窩旅游」App 是馬蜂窩為用戶提供...
摘要：數(shù)據(jù)遷移，主要利用阿里云數(shù)據(jù)傳輸服務(wù)的數(shù)據(jù)遷移能力，涉及到全量遷移增量遷移一致性校驗及反向任務(wù)。小結(jié)通過周密的遷移方案設(shè)計，以及強大的數(shù)據(jù)遷移工具的能力，閑魚商品庫順利完成億在線數(shù)據(jù)庫服務(wù)遷移，獨立的物理部署顯著提升商品庫在線服務(wù)的穩(wěn)定性。 背景 在系統(tǒng)的快速迭代過程中，業(yè)務(wù)系統(tǒng)往往部署在同一個物理庫，沒有做核心數(shù)據(jù)和非核心數(shù)據(jù)的物理隔離。隨著數(shù)據(jù)量的擴大這種情況會帶來穩(wěn)定性的風險，如...
閱讀 3904·2021-11-17 09:33
閱讀 1207·2021-10-09 09:44
閱讀 409·2019-08-30 13:59
閱讀 3486·2019-08-30 11:26
閱讀 2190·2019-08-29 16:56
閱讀 2858·2019-08-29 14:22
閱讀 3156·2019-08-29 12:11
閱讀 1280·2019-08-29 10:58
