解决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分钟,如果切出去的时间大于剩下的时间怎么办,如果不大于,直接减就可以了。如果大于就需要自己根据项目弄了