注册

JS实现精确倒计时

实现倒计时对前端工程师来说,是很常见的需求。那么,要怎么实现精确的倒计时呢?

首先,考虑到客户端时间和服务端时间有误差,所以计算倒计时的时候,应该读取服务端的时间。但是,只考虑到这一点还远远不够的。页面运行时间长了,新打开页面的倒计时和原打开页面的倒计时还是存在误差。要减少这里的误差,就要说到Javascript解释器的工作原理。

Javascript解释器工作原理
Javascript解释器是单线程工作的,它执行任务按照任务进入队列的先后顺序执行。这会造成什么影响呢?
打个比方,设置定时器的时候,按照理想状况,下面的程序应当稳定的输出0。

let start = new Date().getTime()
let count = 0
setInterval(function(){
count++
console.log(new Date().getTime() - (start + count * 1000))
},1000)

bf774bb15e3f2cd5e60b668847cdb2f8.png

由于代码执行占用时间,以及其他事件的阻塞,导致有些事件的执行延迟了几ms,阻塞事件不多时,影响微乎其微。但当我们添加更多的阻塞事件时,这个影响就会被放大,如下面的代码

let start = new Date().getTime()
let count = 0
setInterval(function(){
let j = 0
while(j++ < 100000000){}
},1)
setInterval(function(){
count++
console.log(new Date().getTime() - (start + count * 1000))
},1000)

a1ed688ae2fb903711cd7caf4592d036.png

线程阻塞解决方案

那么我们要怎么解决线程阻塞的问题呢?
按照正常的思路,如果没有被阻塞,下面设置好的定时器应该每隔1s执行一次。

setInterval(function(){},1000)

但是,如果出现阻塞事件,定时器可能就要隔1000+ms才执行一次。要精确的实现每隔1s执行一次,必须要先获取阻塞的时间。这里要用到定时器函数setTimeout控制定时器的执行时间,代码实现如下

setInterval(function(){
let j = 0
while(j++ < 100000000){}
},1)
let interval = 1000,
ms = 50000, //从服务器和活动开始时间计算出的时间差,这里测试用50000ms
count = 0,
startTime = new Date().getTime();
if( ms >= 0){
var timeCounter = setTimeout(countDownStart,interval);
}

第一部分的setInterval是一段阻塞代码。然后,我们分别定义了interval作为定时器的执行时间,距活动结束的时间用ms表示(ms=活动结束时间-服务器时间),
count表示计数器,然后启动定时器timeCounter。其中,countDownStart函数的实现逻辑如下

function countDownStart(){
count++;
let offset = new Date().getTime() - (startTime + count * interval);
let nextTime = interval - offset;
if (nextTime < 0) { nextTime = 0 };
ms -= interval;
console.log("误差:" + offset + "ms" );
if(ms < 0){
clearTimeout(timeCounter);
}else{
timeCounter = setTimeout(countDownStart,nextTime);
}
}

countDownStart的实现原理是,首先定义一个变量offset用来记录阻塞导致延误的时间是多少。nextTime代表offset和interval的差距,根据nextTime修改定时器timeCounter的执行时间,使它nextTime(ms)执行一次。

打个比方,如果上一次执行过程中因为阻塞延误了100ms,那么下一次就提前100ms启动定时器,即

timeCounter = setTimeout(countDownStart,900)

bbf4ef65984e7234b68a96cfd7eb8a7a.png


原文链接:https://blog.csdn.net/weixin_41672178/article/details/88372553

0 个评论

要回复文章请先登录注册