专栏首页吴裕超手机锁屏js倒计时停止问题解决办法探索

手机锁屏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事件来处理,毕竟用户在这个页面不会停留太久,不过这并没有完美的解决问题,如果你有更好的方法,希望能告诉我。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 认识createDocumentFragment

    今天在看vue源码解析时候发现一个api没有见过,一查是原生的,赶紧补漏。 DocumentFragments 是DOM节点。它们不是主DOM树的一部分。通常的...

    吴裕超
  • 微信充值页面开发总结

    前端获取code---把code给后端去获取openID---将openID和订单信息发给后端获取微信支付所需参数(订单号、appid、微信签名等信息)---调...

    吴裕超
  • js设计模式之惰性单例模式

    <html> <body> <button id="loginBtn">登录</button> </body> <script> var cr...

    吴裕超
  • 安排上了!PC人脸识别登录,出乎意料的简单

    之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了一周总算是抽时间安排上了。

    程序员内点事
  • PC人脸识别登录,出乎意料的简单

    之前不是做了个开源项目嘛,在做完GitHub登录后,想着再显得有逼格一点,说要再加个人脸识别登录,就我这佛系的开发进度,过了一周总算是抽时间安排上了。

    程序员内点事
  • 手写Promise A+ 规范

    TimothyJia
  • 芬兰科学家开发纤维素钠米纤维新用途,制愈合无疤伤口型“创可贴” | 黑科技

    镁客网
  • 完整代码

    生南星
  • 当我开始使用React 时,我希望我知道这些知识

    自2013年5月29日首次发布以来,React.js已经占领了互联网。我和许多其他开发人员将他们的成功归功于这个了不起的框架,这已经不是什么秘密了。

    前端小智@大迁世界
  • CentOS 7下安装pptp服务端手记 ok

    应该输出:cat: /dev/net/tun: File descriptor in bad state

    拓荒者

扫码关注云+社区

领取腾讯云代金券