解决js定时器被切换回后台无法执行的问题

最近解决了一个bug

bug重现js代码写一个定时器,如果将这个页面隐藏,

    A.   在pc端是不会影响的,

    B.   但是在手机端,如果你切换到你的后台(不是关闭应用,是切到后台),那么你的定时器就会停止。那如果你在页面做一个倒计时,然后切换到后台后,你的倒计时就会停止在那个时间点。这样就会产生一些bug,比如倒计时抽奖等

解决办法:

思路:

        如果到后台了,

        1.计算一下当前时间,

        2.等切回来,再算一下当前时间,

        3.然后计算时间差

        4.然后用当时定格的那个时间去减去这个时间差,再赋值给这个定时器,就ok了

实现:

        在页面添加一个监听事件,如监听你的js页面是否被切换到了后台,这个监听就是   visibilitychange 

        

这里提示一下 如果 visibilitychange 监听不到那么可以添加兼容性的内核前缀 

比如 webkitvisibilitychange 或者 mozvisibilitychange 相应的document.后面也要换

提示一下,我再写的过程中 开始用的前缀的 发现 安卓好使,但是ios无效,一直是undefined

后来发现 2者通用 visibilitychange 算是一个小坑吧

最后上一下 我的代码

然后我用created去启动了这个方法

这里我的问题是比如倒计时5分钟,如果切出去的时间大于剩下的时间怎么办,如果不大于,直接减就可以了。如果大于就需要自己根据项目弄了

 

如果你觉得我帮到你了,买个肥宅快乐水,怎么样?哈哈哈哈哈哈

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值