我的这段js倒计时为什么越走越慢？

Question

varorderTimeOut=900000;
vartimer=setInterval(()=>{
orderTimeOut-=10;
if(orderTimeOut>10){
times=overTime(orderTimeOut);
console.log(times)
}else{
orderTimeOut=0;
times="00:00:00";
}
},10);
functionoverTime(time){
vara=(time%1000).toString().substr(0,2);
varb=Math.floor(time/1000);
varm=b%60;
m=String(m);
m=m.length>=2?m:"0"+m;
varf=Math.floor(time/(1000*60));
f=String(f);
f=f.length>=2?f:"0"+f;
returnf+":"+m+"."+a;
}
这段方法能够正常进行倒计时，但是观察到，它似乎越跑越慢.....

Answer 1

无论是setInterval还是setTimeout，时间肯定是不对的。计时器逻辑是task执行完成后，查看timer是否过时，如果过时，执行timer回调。也就是说如果有同步方法在运行，那么计时器的回调就会延后，而如果倒计时很久，这个延后的时间累加就会造成和真实时间不同步。leti=0;setInterval(()=>{if(i===0){console.log('start',Date.now())letlastTime=newDate().getTime()+10*1000;//暂停10swhile(lastTime>newDate().getTime()){}}i++;console.log(i,Date.now())//以后的时间都延迟了10s+},1000)

Answer 2

刚做了下测试，在一个只运行此方法的页面上，对比系统时间进度，还是很同步的。实际项目中，运行的功能比较多，而setInterval会将事件放到当前队列的最后执行，看起来的确有点卡壳。不过实际应该不会变慢，如果我理解的setInterval没错的话。有setInterval，浏览器会单独开一个线程，每隔几毫秒将此方法扔进JS队列。每隔几秒是比较固定的，但什么时候执行放进去的代码却是不可控的。如果当前队列的事情比较多，短时间不会执行此方法，看起来就变慢了。不过相应的，也会在某个时刻一次性执行很多次此方法。补充另个相对优化的倒计时方法。接到要倒计时的总时间T，并记下当前的时间tStart。使用setTimeout隔一段时间执行方法，方法里结合三个变量的关系（加上现在的时间）算出剩余时间。再次调用setTimeout重复操作。