倒计时相关

2015年09月27日

近几个月来自己的状态懒的令人发指==。补记一下之前踩的这个坑,觉得还是蛮有记录的意义的。

图片显示

现象

交互方式10s倒计时内,手指网上滑动有效距离飞出一枚金币,同时页面上方的滚动往左滚动,倒计时结束时提交结果,并且滚动条为空。

之前我一直没有意识到计时不准的问题,本能的认为这个定时器是跟时钟一样准的不行的存在。直到这个活动页中同时存在了几个css动画,并且含有手指与屏幕频繁的交互。现象就是页面上倒计时部分会越来越慢,最后对比了一下10秒进度条跑完的事件与计算机上的10S会存在不小的偏差,如果你手速较快的touch屏幕,会造成这个预计的10s变成11s、12s甚至更多。

在js中如果打算使用setInterval进行倒数,计时等功能,往往是不准确的,因为setInterval的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害。

参考链接

CSS3 动画在iOS上为什么会因为页面滚动也停止?