手機鎖屏js倒計時停止問題解決辦法探索

2022-05-02 07:18:10 字數 624 閱讀 4871

如圖,有這麼個需求,測試人員在測試過程中提了乙個bug,手機鎖屏再喚醒倒計時時間沒有更新,仍從鎖屏的時間繼續,於是開始尋找解決之法

經了解得知,鎖屏時候,瀏覽器的一切活動會停止執行,那麼js也無法倖免,這時候就想到有沒有能監聽瀏覽器活動停止的方法呢?一查,果然有

visibilitychange

具體可參看

重要的就是給window加乙個visibilitychange監聽,在裡面判斷document.tvisibilitystate的值,如果為hidden,則是頁面內容不可見時的鉤子,如果不是hidden,則就是可見時的鉤子,即喚醒頁面或切換應用回到頁面的**。

vue裡面使用方法可以參考以下**

data:() =>

}mounted() ,

beforedestroy(),

methods:

else},}

經實驗,加上這段**後確實倒計時更新了,但是時間顯示會快2到3秒,不得其解,感覺應該是取值的時候比螢幕喚醒慢了,比如我鎖屏5秒,但是在喚醒時倒計時少了7秒。

也想到了一種辦法,就是喚醒時候重新拉取服務端的時間,然後更新虛擬dom,在實際操作中,由於是非同步獲取,會看到倒計時數字那裡有明顯的閃一下更新,不利於使用者體驗。

js倒計時,秒倒計時,天倒計時

html 1 html 2 距某某開幕式還有 天 html html html id timer style color red 這次利用系統時間自校驗倒計時,無需手工調校使得倒計時更為精確,及詳細注釋如下 id clock 00 01 11 00 id startb type button val...

js 多個倒計時,毫秒倒計時

其實主要是借鑑了了這篇文的寫法 俺稍作了修改,以便更適合我的需要 實現功能 呼叫乙個函式,傳入html元素的id,和乙個截止時間 unix時間戳 在該html元素中列印出到當前到截止時間為止的倒計時,精確到毫秒 效果圖如下 h2 毫秒的倒計時 h2 div id timer1 div div id ...

JS 簡易倒計時

簡易倒計時,非常簡單。這裡主要用到了setinterval 和clearinterval 方法 定義 setinterval 方法可按照指定的週期 以毫秒計 來呼叫函式或計算表示式。setinteral 方法會不停地呼叫函式,直到clearinterval 被呼叫或視窗被關閉。由setinterva...