本文记录了在移动端H5页面中遇到的倒计时时间不准问题，当应用切到后台时，js定时器时间不再准确。通过分析，发现大部分移动浏览器会冻结未激活页面的定时器。解决方案包括监听浏览器状态并在切换回前台时重新获取服务器时间。对于原生App，需要App端协助处理页面状态变化，通过App回调前端方法来保持倒计时准确性。此外，对于iOS长按暂停问题，提出了利用服务器时间与本地时间差值调整的方法。
这两天做迭代任务遇到了一个难题，现在找到了解决方法，为了避免忘记，在这里记录下来。
项目描述：一个基于vue写的h5页面，根据后端返回的当前服务器时间做一个倒计时（我是用setInterval 做的）。该h5页面分别嵌套到微信公众号、和原生app中。
问题描述：使用home键把页面切到后台运行，倒计时就暂停了，再切回到前台运行回去看倒计时，时间不准确（具体表现为：切出之前是20：20：20，切出等待10秒再切回来，时间仍然停留在20：20：20，并没有减去10秒）。
我百度了一下，看到了一个大神的回答：
【 PC 上的 Firefox、Chrome 和 Safari 等浏览器，都会自动把未激活页面中的 JavaScript 定时器（setTimeout、setInterval）间隔最小值改为 1 秒以上。这是因为间隔很小的定时器一般用来做 UI 更新（例如用定时器实现的动画），让用户不可见的页面上的定时器跑慢一些，既节省资源又不会影响体验。对移动浏览器来说，内存、CPU、带宽等资源更加宝贵，移动设备上的浏览器往往会直接冻结所有未激活页面上的所有定时器。】
怎么办呢？
我立马想到的是在定时器实时获取当前服务器时间，但这样肯定不行，服务器时间是通过接口获取的，这样就会大量造成服务器的压力。
后来想到可以监听浏览器前后台的切换状态，这样就可以可用这个状态取去做一些事情了，比如切换回来的时候重新请
最低0.47元/天 解锁文章
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
