手机拖动时js停止运行,倒计时实例

问题描述

 

在手机中拖动手机屏幕(window的scroll事件)或关闭手机屏幕时,会让js暂停运行。

这个状况会直接导致类似倒计时这样的效果出现问题。

比如你做了个页面上的倒计时,按照秒的精度倒数,当你拖动屏幕浏览内容时只要你的手没有放开,那时间是不动的。(可以联想到类似轨迹动画也是会停止的)。

 

我的解决办法

一、改变拖动的方式。

将scroll事件改为touchMove,可以让你在拖动的时候仍然保持js的运行。
典型的插件iscroll,虽然这个插件还不是完全体,有一些已知的bug,但是可以给你一个思路让你解决问题。

这个只能解决拖动上得问题,关闭手机屏幕还是无解的。

 

二、利用机器时间差异

这个算是曲线救国(谢谢数学老师),做一个setInterval来循环调用机器时间(间隔事件根据需要设定),如果与上次的调用时间超出预计,那就是产生了拖动和灭屏的状况,那么我们根据这个时间差,来计算目标时间应该达到的目标状态,并重置到这个状态。
我觉得是个代价相对较小的方法。

 

假设刚进入页面的时间是准确的
已知服务器时间 x 和当前机器时间 y
因为服务器时间和机器时间不一定相等
所以我们假定这个时间差z = x-y;
z为恒定值
获取当前机器时间的代码代价较小,我们可以在定时器中一直获取动态的y,再根据z,校准当前的确定的服务器时间,而不用反复请求。
如果是倒计时,需要的是时间差
那就需要一个目标时间a
时间差b的校准公式应该是
b= a-y-z;

 

三、面对鬼畜产品经理

“我要拖动的时候时间是动的,灭屏回来时间也是对的!”
这个时候结合方法一和二,就可以解决了。
我比较懒,方法在上面,自己写一写…
“什么?灭屏回来会卡顿?”
Sorry…