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