手机锁屏js倒计时停止问题解决办法探索

Posted 2021-01-25 卢沟晓月前端之路

如图，有这么个需求，测试人员在测试过程中提了一个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事件来处理，毕竟用户在这个页面不会停留太久，不过这并没有完美的解决问题，如果你有更好的方法，希望能告诉我。