摘要：這么執(zhí)行導(dǎo)致的結(jié)果是每次的時(shí)間必然會(huì)大于主線程代碼執(zhí)行消耗的時(shí)間，而當(dāng)這個(gè)主線程代碼執(zhí)行消耗的時(shí)間累加起來超過時(shí)，就會(huì)出現(xiàn)跳一秒的情況。

新年伊始，本搬磚汪先給各位老爺們拜個(gè)晚年，祝各位技術(shù)大牛們?cè)谛碌囊荒甏a功底更進(jìn)一步，家庭幸福美滿！

下面進(jìn)入正題：在翻閱segmentfault社區(qū)時(shí)看到某巨廠面試要求實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能，之前也沒有仔細(xì)實(shí)現(xiàn)過，趁年初來任務(wù)還沒來得及分配，趕緊著手實(shí)現(xiàn)了一個(gè)。

var period = 60*1000*60*2
var end = new Date().getTime() + period
var date = new Date(end)
var interval = 1000
var count = 0
var startTime = new Date().getTime()

console.log("開始時(shí)間：" + startTime)

function loopInner() {
  count++

  var diff = end - new Date().getTime()
  var h = Math.floor(diff / (60*1000*60))
  var hdiff = diff % (60*1000*60)
  var m = Math.floor(hdiff / (60*1000))
  var mdiff = hdiff % (60*1000)
  var s = mdiff / 1000
  var sCeil = Math.ceil(s)

  var j = 0
  while (j<100000000) { // 放大主線程代碼執(zhí)行時(shí)間
    j++
  }

  console.log(h + "小時(shí)", m + "分鐘:", s + "秒（精確到毫秒）", sCeil + "秒（進(jìn)一法）")
}

function loop() {
  loopInner() // 首先var j = 0

  if (count === 100) {
    var endTime = new Date().getTime()
    console.log("結(jié)束時(shí)間：" + endTime) // 打印開始時(shí)間
    console.log("時(shí)間差毫秒數(shù)：" + Number(endTime - startTime) + "對(duì)應(yīng)秒數(shù)：" + Number(endTime - startTime) / 1000)
    console.log("計(jì)時(shí)器計(jì)算秒數(shù)：100")
  } else {
    return setTimeout(loop, interval)
  }
}

loop()

結(jié)果如下：

第一版實(shí)現(xiàn)我使用的是遞歸的setTimeout方法，原因是之前曾經(jīng)看到過遞歸的setTimeout能避免setInterval忽視代碼執(zhí)行時(shí)間，而一個(gè)事件隊(duì)列里只會(huì)有一個(gè)setInterval事件導(dǎo)致的部分setInterval事件被忽略的情況。這么執(zhí)行導(dǎo)致的結(jié)果是每次setTimeout的時(shí)間必然會(huì)大于1000ms（1000 + 主線程代碼執(zhí)行消耗的時(shí)間），而當(dāng)這個(gè)主線程代碼執(zhí)行消耗的時(shí)間累加起來超過1s時(shí)，就會(huì)出現(xiàn)跳一秒的情況。這一版實(shí)現(xiàn)方案的結(jié)果不盡如人意。

var period = 60 * 1000 * 60 * 2
var end
var date = new Date(end)
var interval = 1000
var count = 0
var startTime = new Date().getTime()

console.log("開始時(shí)間：" + startTime)

var loop = function () {
  count++
  if (count === 100) {
    var endTime = new Date().getTime()
    console.log("結(jié)束時(shí)間：" + endTime) // 打印開始時(shí)間
    console.log("時(shí)間差毫秒數(shù)：" + Number(endTime - startTime) + "對(duì)應(yīng)秒數(shù)：" + Number(endTime - startTime) / 1000)
    console.log("計(jì)時(shí)器計(jì)算秒數(shù)：100")
    return clearInterval(Itvid)
  }

  if (!end) { end = new Date().getTime() + period }
  var diff = end - new Date().getTime()
  var h = Math.floor(diff / (60 * 1000 * 60))
  var hdiff = diff % (60 * 1000 * 60)
  var m = Math.floor(hdiff / (60 * 1000))
  var mdiff = hdiff % (60 * 1000)
  var s = mdiff / (1000)
  var roundS = Math.round(s)

  var j = 0
  while (j<100000000) { // 放大主線程代碼執(zhí)行時(shí)間
    j++
  }

  console.log(h + "小時(shí):", m + "分鐘:", s + "秒（精確到毫秒）", roundS + "秒（四舍五入）")
}
var Itvid = setInterval(loop, interval)

結(jié)果如下：

這一版的結(jié)果比較接近正確答案，利用setInterval不等待執(zhí)行代碼完成就直接加入隊(duì)列的特性（參考setInterval與setTimeout的精確度問題），再加上用Math.round方法修正js的異步方法所造成的幾毫秒的誤差即可。而setInterval畢竟也是瀏覽器的api，同樣是有幾毫秒的差異的。

這一版是我選擇在第一種寫法的基礎(chǔ)上做改良：每次循環(huán)中基于此次代碼執(zhí)行所消耗的時(shí)間對(duì)下次循環(huán)所消耗的時(shí)間間隔做修正。

var period = 60 * 1000 * 60 * 2
var startTime = new Date().getTime();
var count = 0
var end = new Date().getTime() + period
var interval = 1000
var currentInterval = interval

console.log("開始時(shí)間：" + startTime) // 打印開始時(shí)間

function loop() {
  count++
  var offset = new Date().getTime() - (startTime + count * interval); // 代碼執(zhí)行所消耗的時(shí)間
  var diff = end - new Date().getTime()
  var h = Math.floor(diff / (60 * 1000 * 60))
  var hdiff = diff % (60 * 1000 * 60)
  var m = Math.floor(hdiff / (60 * 1000))
  var mdiff = hdiff % (60 * 1000)
  var s = mdiff / (1000)
  var sCeil = Math.ceil(s)
  var sFloor = Math.floor(s)
  currentInterval = interval - offset // 得到下一次循環(huán)所消耗的時(shí)間

  var j = 0
  while (j<100000000) { // 放大主線程代碼執(zhí)行時(shí)間
    j++
  }

  console.log("時(shí)："+h, "分："+m, "毫秒："+s, "秒向上取整："+sCeil, "代碼執(zhí)行時(shí)間："+offset+"ms", "下次循環(huán)間隔"+currentInterval+"ms") // 打印 時(shí) 分 秒 代碼執(zhí)行時(shí)間 下次循環(huán)間隔
  if (count === 100) {
    var endTime = new Date().getTime()
    console.log("結(jié)束時(shí)間：" + endTime) // 打印開始時(shí)間
    console.log("時(shí)間差毫秒數(shù)：" + Number(endTime - startTime) + "對(duì)應(yīng)秒數(shù)：" + Number(endTime - startTime) / 1000)
    console.log("計(jì)時(shí)器計(jì)算秒數(shù)：100")
  } else {
    setTimeout(loop, currentInterval)
  }
}

setTimeout(loop, currentInterval)

結(jié)果如下：

對(duì)于同步代碼執(zhí)行耗時(shí)不是過大（幾十毫秒到幾百毫秒之間）的情況，通過實(shí)驗(yàn)得到結(jié)果：

setInterval > 修正時(shí)間間隔的遞歸setTimeout > 遞歸setTimeout

業(yè)務(wù)場(chǎng)景中是否存在同步代碼執(zhí)行時(shí)間超過數(shù)秒的情況？

業(yè)務(wù)場(chǎng)景中實(shí)現(xiàn)倒計(jì)時(shí)的標(biāo)準(zhǔn)做法？

從服務(wù)端端獲取開始時(shí)間會(huì)有時(shí)間損耗（http傳輸?shù)暮臅r(shí)），這個(gè)耗時(shí)有沒有方法規(guī)避？

依然遺留這些問題存在，還請(qǐng)各位不吝賜教。

JS實(shí)現(xiàn)活動(dòng)精確倒計(jì)時(shí)
w3.org
javascript線程解釋（setTimeout,setInterval你不知道的事）

歡迎訪問我的博客