首頁(yè) 猿問我的這段js倒計(jì)時(shí)為什么越走越慢？

我的這段js倒計(jì)時(shí)為什么越走越慢？

JavaScript

慕的地6264312 2019-05-20 17:21:57

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;}這段方法能夠正常進(jìn)行倒計(jì)時(shí)，但是觀察到，它似乎越跑越慢.....

查看完整描述

2 回答

波斯汪

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超4個(gè)贊

無論是setInterval還是setTimeout，時(shí)間肯定是不對(duì)的。計(jì)時(shí)器邏輯是task執(zhí)行完成后，查看timer是否過時(shí)，如果過時(shí)，執(zhí)行timer回調(diào)。也就是說如果有同步方法在運(yùn)行，那么計(jì)時(shí)器的回調(diào)就會(huì)延后，而如果倒計(jì)時(shí)很久，這個(gè)延后的時(shí)間累加就會(huì)造成和真實(shí)時(shí)間不同步。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())//以后的時(shí)間都延遲了10s+},1000)

反對(duì) 回復(fù) 2019-05-20

幕布斯6054654

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊

剛做了下測(cè)試，在一個(gè)只運(yùn)行此方法的頁(yè)面上，對(duì)比系統(tǒng)時(shí)間進(jìn)度，還是很同步的。實(shí)際項(xiàng)目中，運(yùn)行的功能比較多，而setInterval會(huì)將事件放到當(dāng)前隊(duì)列的最后執(zhí)行，看起來的確有點(diǎn)卡殼。不過實(shí)際應(yīng)該不會(huì)變慢，如果我理解的setInterval沒錯(cuò)的話。有setInterval，瀏覽器會(huì)單獨(dú)開一個(gè)線程，每隔幾毫秒將此方法扔進(jìn)JS隊(duì)列。每隔幾秒是比較固定的，但什么時(shí)候執(zhí)行放進(jìn)去的代碼卻是不可控的。如果當(dāng)前隊(duì)列的事情比較多，短時(shí)間不會(huì)執(zhí)行此方法，看起來就變慢了。不過相應(yīng)的，也會(huì)在某個(gè)時(shí)刻一次性執(zhí)行很多次此方法。補(bǔ)充另個(gè)相對(duì)優(yōu)化的倒計(jì)時(shí)方法。接到要倒計(jì)時(shí)的總時(shí)間T，并記下當(dāng)前的時(shí)間tStart。使用setTimeout隔一段時(shí)間執(zhí)行方法，方法里結(jié)合三個(gè)變量的關(guān)系（加上現(xiàn)在的時(shí)間）算出剩余時(shí)間。再次調(diào)用setTimeout重復(fù)操作。

反對(duì) 回復(fù) 2019-05-20