首頁猿問我的這段js倒計時為什么越走越慢？

我的這段js倒計時為什么越走越慢？

JavaScript

慕桂英3389331 2019-05-21 09:54:37

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

查看完整描述

2 回答

牛魔王的故事

TA貢獻(xiàn)1830條經(jīng)驗獲得超3個贊

無論是setInterval還是setTimeout，時間肯定是不對的。計時器邏輯是task執(zhí)行完成后，查看timer是否過時，如果過時，執(zhí)行timer回調(diào)。也就是說如果有同步方法在運行，那么計時器的回調(diào)就會延后，而如果倒計時很久，這個延后的時間累加就會造成和真實時間不同步。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)

反對回復(fù) 2019-05-21

函數(shù)式編程

TA貢獻(xiàn)1807條經(jīng)驗獲得超9個贊

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

反對回復(fù) 2019-05-21