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

Aomine 發布于2019-08-23 12:38 / 2665人閱讀

摘要：問題描述這個倒計時按鈕，如果頁面在移動端切到后臺和切回來，倒計時停止運行。相關代碼為了兼容，切換到后臺繼續運行

問題描述

這個倒計時按鈕，如果頁面在移動端切到后臺和切回來，倒計時停止運行。
但是在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...

解決思路

倒計時開始啟動，增加監聽器，監聽visibilitychange事件

切換到后臺，觸發visibilitychange事件，記錄開始時間

切換到前臺，觸發visibilitychange事件，記錄結束時間

用結束時間 - 開始時間，當前值減去時間差就是切換到后臺走的數值，然后繼續運行倒計時。

相關代碼

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);

云服務器 GPU云服務器 php返回繼續執行非主線程的執行問題 java倒計時后執行兼容支持webrtc的移動端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98867.html

馬蜂窩 iOS App 啟動治理：回歸用戶體驗

摘要：馬蜂窩旅游歷經幾十個版本的開發迭代，在啟動流程上積累了一定的技術債務。我們定義啟動廣告曝光率啟動廣告曝光啟動廣告加載。增長、活躍、留存是移動 App 的常見核心指標，直接反映一款 App 甚至一個互聯網公司運行的健康程度和發展動能。啟動流程的體驗決定了用戶的第一印象，在一定程度上影響了用戶活躍度和留存率。因此，確保啟動流程的良好體驗至關重要。「馬蜂窩旅游」App 是馬蜂窩為用戶提供...

Jinkey 2019-08-26 18:27 評論0 收藏0
21世紀了還愚公移山？數據庫這么遷移更穩定！

摘要：數據遷移，主要利用阿里云數據傳輸服務的數據遷移能力，涉及到全量遷移增量遷移一致性校驗及反向任務。小結通過周密的遷移方案設計，以及強大的數據遷移工具的能力，閑魚商品庫順利完成億在線數據庫服務遷移，獨立的物理部署顯著提升商品庫在線服務的穩定性。背景在系統的快速迭代過程中，業務系統往往部署在同一個物理庫，沒有做核心數據和非核心數據的物理隔離。隨著數據量的擴大這種情況會帶來穩定性的風險，如...

ymyang 2019-06-25 19:08 評論0 收藏0