手机熄屏js定时器时间不准问题及解决办法

一、应用场景

当用户需要发短信时用到了倒计时的功能，当页面有活动倒计时功能。

二、为什么会出现这个问题？

H5切换应用或手机熄屏，都是进入了后台运行，定时器在后台会停止运行。导致时间不准。百度上也有很多解释：

【 PC 上的 Firefox、Chrome 和 Safari 等浏览器，都会自动把未激活页面中的 JavaScript 定时器（setTimeout、setInterval）间隔最小值改为 1 秒以上。这是因为间隔很小的定时器一般用来做 UI 更新（例如用定时器实现的动画），让用户不可见的页面上的定时器跑慢一些，既节省资源又不会影响体验。对移动浏览器来说，内存、CPU、带宽等资源更加宝贵，移动设备上的浏览器往往会直接冻结所有未激活页面上的所有定时器。】

三、解决问题

思路：使用系统时间的时间差来实现这个功能。
1、定义一个变量传入的分钟数（TimeVal）。
2、记录页面初次进入的时间(entryTime)，在定时器中每隔一秒记录一次当前时间(currentTime)，currentTime - entryTime = 时间差 。
3、一般在倒计时里面都是有一个变量time；这个time--就会出现倒计时的效果，在这里 time-- 其实就是currentTime - entryTime

举例说明：我需要做一个一分钟的倒计时，8:00进入页面，entryTime = 8:00。此时倒计时60秒开始计算，八点整20秒时我手机熄屏（8:00:20），此时倒计时已经变成40秒。再打开屏幕时当前时间currentTime = 8:00:50。此时应该用8:00:50 - 8:00:00 = 50 s 。这50秒就是已经走掉的秒数，就可以得出还剩多少秒数。

四、附上代码

五、总结

这样就可以实现切换到后台或者熄屏定时器依然继续执行啦，如果对你有帮助，请点个赞再走把。