完美解决浏览器解决浏览器切换后台,js倒计时不执行的问题!
如果在一个网页上做一个计时器,最简单的方法就是载入网页的时候服务器给一个基础时间,然后网页端用js一秒一秒的加时间,并显示。在PC上一般是没问题的,但是在手机上就大大有问题,因为当手机浏览器切到后台的时候,js是不会继续计时的,一段时间后,再切回浏览器的时候,计时只会从刚才被切出去的时候继续计时。而中间切出去的时间则没法计量。
我这里的办法是,在一进入H5页面的时候,就记录下当前移动端浏览器的时间,记住是浏览器的当前时间nowTime。然后开始用setTimeout或者setInterval开始倒计时,倒计时的时候首先拿取一下当前浏览器的时间,记住,又是当前浏览器的时间nextTime,然后用获取到的nextTime减去nowTime,我们会得到一个差值diffTime,再用浏览器返回的倒计时秒数去减diffTime,我们能得到一个值CountDown,最后我们用CountDown去进行倒计时。
实现思路是:记录用户一进入页面的时间,每一秒在获取一下当前浏览器的时间,差值diffTime就是用户在页面停留的时间。最后用服务端返回的秒数去减得到得差值diffTime,最后得到得值CountDown就是我们实际的倒计时。因为nextTime每一秒都会获取一次,所以不用考虑切后台运行,js不执行的问题。