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

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

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

visibilitychange

具體可參看https://www.css88.com/archives/6103，

重要的就是給window加一個visibilitychange監聽，在里面判斷document.tVisibilityState的值，如果為hidden，則是頁面內容不可見時的鈎子，如果不是hidden，則就是可見時的鈎子，即喚醒頁面或切換應用回到頁面的回調。

vue里面使用方法可以參考以下代碼

data:() =>{
　　return {
　　　　times:'',
　　　　closeTime:''
　　}
}
mounted() {
    window.addEventListener('visibilitychange',this.diffTime)
  },
  beforeDestroy(){
    window.removeEventListener('visibilitychange', this.diffTime)
  },
  methods: {
    // 處理鎖屏時間差
    diffTime() {
      if (document.tVisibilityState =='hidden') {
       this.closeTime = Date.now()
      } else {
        this.times = this.times - (Date.now() - this.closeTime)/1000;
      }
    },
 }

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

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

所以最終還是采用了visibilitychange事件來處理，畢竟用戶在這個頁面不會停留太久，不過這並沒有完美的解決問題，如果你有更好的方法，希望能告訴我。