手機鎖屏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事件來處理，畢竟用戶在這個頁面不會停留過久，不過這並無完美的解決問題，若是你有更好的方法，但願能告訴我。