手机锁屏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事件来处理，毕竟用户在这个页面不会停留过久，不过这并无完美的解决问题，若是你有更好的方法，但愿能告诉我。