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

var orderTimeOut = 900000;
var timer = setInterval(() => {
  orderTimeOut -= 10;
  if (orderTimeOut > 10) {
     times = overTime(orderTimeOut);
     console.log(times)
  }else {
    orderTimeOut = 0;
    times = "00:00:00";
  }
}, 10);

function overTime(time) {
  var a = (time % 1000).toString().substr(0, 2);
  var b = Math.floor(time / 1000);
  var m = b % 60;
  m = String(m);
  m = m.length >= 2 ? m : "0" + m;
  var f = Math.floor(time / (1000 * 60));
  f = String(f);
  f = f.length >= 2 ? f : "0" + f;
  return f + ":" + m + "." + a;
}

這段方法能夠正常進(jìn)行倒計(jì)時(shí)，但是觀察到，它似乎越跑越慢.....

回答

編輯回答

幼梔

剛做了下測(cè)試，在一個(gè)只運(yùn)行此方法的頁(yè)面上，對(duì)比系統(tǒng)時(shí)間進(jìn)度，還是很同步的。
實(shí)際項(xiàng)目中，運(yùn)行的功能比較多，而setInterval會(huì)將事件放到當(dāng)前隊(duì)列的最后執(zhí)行，看起來(lái)的確有點(diǎn)卡殼。
不過(guò)實(shí)際應(yīng)該不會(huì)變慢，如果我理解的setInterval沒(méi)錯(cuò)的話。
有setInterval，瀏覽器會(huì)單獨(dú)開一個(gè)線程，每隔幾毫秒將此方法扔進(jìn)JS隊(duì)列。
每隔幾秒是比較固定的，但什么時(shí)候執(zhí)行放進(jìn)去的代碼卻是不可控的。
如果當(dāng)前隊(duì)列的事情比較多，短時(shí)間不會(huì)執(zhí)行此方法，看起來(lái)就變慢了。不過(guò)相應(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ù)操作。

2017年3月3日 22:39

編輯回答

練命

無(wú)論是setInterval還是setTimeout，時(shí)間肯定是不對(duì)的。
計(jì)時(shí)器邏輯是task執(zhí)行完成后，查看timer是否過(guò)時(shí)，如果過(guò)時(shí)，執(zhí)行timer回調(diào)。
也就是說(shuō)如果有同步方法在運(yùn)行，那么計(jì)時(shí)器的回調(diào)就會(huì)延后，而如果倒計(jì)時(shí)很久，這個(gè)延后的時(shí)間累加就會(huì)造成和真實(shí)時(shí)間不同步。

let i = 0;
setInterval(() => {
  if (i === 0) {
    console.log('start', Date.now())
    let lastTime = new Date().getTime() + 10 * 1000;//暫停10s 
    while (lastTime > new Date().getTime()) {

    }
  }
  i++;
  console.log(i, Date.now())//以后的時(shí)間都延遲了10s+

}, 1000)

2017年11月28日 21:15