setTimeout 或者 setInterval，關(guān)于 Javascript 計時器：你需要知道的

Warren 發(fā)布于2019-08-26 10:55 / 1677人閱讀

摘要：所以，我們可以將理解為計時結(jié)束是執(zhí)行任務(wù)的必要條件，但是不是任務(wù)是否執(zhí)行的決定性因素。的意思是，必須超過毫秒后，才允許執(zhí)行。

先來回答一下下面這個問題：對于 setTimeout(function() { console.log("timeout") }, 1000) 這一行代碼，你從哪里可以找到 setTimeout 的源代碼（同樣的問題還會是你從哪里可以看到 setInterval 的源代碼）？

很多時候，可以我們腦子里面閃過的第一個答案肯定是 V8 引擎或者其它 VM們，但是要知道的一點是，所有我們所見過的 Javascript 計時函數(shù)，都沒有出現(xiàn)在 ECMAScript 標(biāo)準(zhǔn)中，也沒有被任何 Javascript 引擎實現(xiàn)，計時函數(shù)，其實都是由瀏覽器（或者其它運行時，比如 Node.js）實現(xiàn)的，并且，在不同的運行時下，其表現(xiàn)形式有可能都不一致。

在瀏覽器中，主計時器函數(shù)是 Window 接口的一部分，這保證了包括如 setTimeout、setInterval 等計時器函數(shù)以及其它函數(shù)和對象能被全局訪問，這才是你可以隨時隨地使用 setTimeout 的原因。同樣的，在 Node.js 中，setTimeout 是 global 對象的一部分，這拿得你也可以像在瀏覽器里面一樣，隨時隨地的使用它。

到現(xiàn)在可能會有一些人感覺這個問題其實并沒有實際的價值，但是作為一個 Javascript 開發(fā)者，如果不知道本質(zhì)，那么就有可能不能完全的理解 V8 （或者其它VM）是到底是如何與瀏覽器或者 Node.js 相互作用的。

暫緩一個函數(shù)的執(zhí)行

計時器函數(shù)都是更高階的函數(shù)，它們可以用于暫緩一個函數(shù)的執(zhí)行，或者讓一個函數(shù)重復(fù)執(zhí)行（由他們的第一個參數(shù)執(zhí)行需要執(zhí)行的函數(shù)）。

下面這是一個暫緩執(zhí)行的示例：

setTimeout(() => {
  console.log("距離函數(shù)的調(diào)用，已經(jīng)過去 4 秒了")
}, 4 * 1000)

在上面的示例中， setTimeout 將 console.log 的執(zhí)行暫緩了 4 * 1000 毫秒，也就是 4 秒鐘， setTimeout 的第一個函數(shù)，就是需要暫緩執(zhí)行的函數(shù)，它是一個函數(shù)的引用，下面這個示例是我們更加常見到的寫法：

const fn = () => {
  console.log("距離函數(shù)的調(diào)用，已經(jīng)過去 4 秒了")
}

setTimeout(fn, 4 * 1000)

傳遞參數(shù)

如果被 setTimeout 暫緩的函數(shù)需要接收參數(shù)，我們可以從第三個參數(shù)開始添加需要傳遞給被暫緩函數(shù)的參數(shù)：

const fn = (name, gender) => {
  console.log(`I"m ${name}, I"m a ${gender}`)
}

setTimeout(fn, 4 * 1000, "Tao Pan", "male")

上面的 setTimeout 調(diào)用，其結(jié)果與下面這樣調(diào)用類似：

setTimeout(() => {
  fn("Tao Pan", "male")
}, 4 * 1000)

但是記住，只是結(jié)果類似，本質(zhì)上是不一樣的，我們可以用偽代碼來表示 setTimeout 的函數(shù)實現(xiàn)：

const setTimeout = (fn, delay, ...args) => {
  wait(delay) // 這里表示等待 delay 指定的毫秒數(shù)
  fn(...args)
}

挑戰(zhàn)一下

編寫一個函數(shù)：

當(dāng) delay 為 4 秒的時候，打印出：距離函數(shù)的調(diào)用，已經(jīng)過去 4 秒了

當(dāng) delay 為 8 秒的時候，打印出：距離函數(shù)的調(diào)用，已經(jīng)過去 8 秒了

當(dāng) delay 為 N 秒的時候，打印出：距離函數(shù)的調(diào)用，已經(jīng)過去 N 秒了

下面這個是我的一個實現(xiàn)：

const delayLog = delay => {
  setTimeout(console.log, delay * 1000, `距離函數(shù)的調(diào)用，已經(jīng)過去 ${delay} 秒了`)
}

delayLog(4) // 輸出：距離函數(shù)的調(diào)用，已經(jīng)過去 4 秒了
delayLog(8) // 輸出：距離函數(shù)的調(diào)用，已經(jīng)過去 8 秒了

我們來理一下 delayLog(4) 的整個執(zhí)行過程：

delay = 4

setTimeout 執(zhí)行

4 * 1000 毫秒后， setTimeout 調(diào)用 console.log 方法

setTimeout 計算其第三個參數(shù) 距離函數(shù)的調(diào)用，已經(jīng)過去 ${delay} 秒了 得到 距離函數(shù)的調(diào)用，已經(jīng)過去 4 秒了

setTimeout 將計算得到的字符串當(dāng)作 console.log 的第一個參數(shù)

console.log("距離函數(shù)的調(diào)用，已經(jīng)過去 4 秒了") 執(zhí)行，輸出結(jié)果

規(guī)律性重復(fù)一個函數(shù)的執(zhí)行以及停止重復(fù)調(diào)用

如果我們現(xiàn)在要每 4 秒第印一次呢？這里面就有很多種實現(xiàn)方式了，假如我們還是使用 setTimeout 來實現(xiàn)，我們可以這樣做：

const loopMessage = delay => {
  setTimeout(() => {
    console.log("這里是由 loopMessage 打印出來的消息")
    loopMessage(delay)
  }, delay * 1000)
}

loopMessage(1) // 此時，每過 1 秒鐘，就會打印出一段消息：*這里是由 loopMessage 打印出來的消息*

但是這樣有一個問題，就是開始之后，我們就沒有辦法停止，怎么辦？可以稍稍改改實現(xiàn)：

let loopMessageTimer

const loopMessage = delay => {
  loopMessageTimer = setTimeout(() => {
    console.log("這里是由 loopMessage 打印出來的消息")
    loopMessage(delay)
  }, delay * 1000)
}

loopMessage(1)

clearTimeout(loopMessageTimer) // 我們隨時都可以使用 `clearTimeout` 清除這個循環(huán)

但是這樣還是有問題的，如果 loopMessage 被調(diào)用多次，那么他們將共用一個 loopMessageTimer，清除一個，將清除所有，這是肯定不行的，所以，還得再改造一下：

const loopMessage = delay => {
  let timer
  
  const log = () => {
    timer = setTimeout(() => {
      console.log(`每 ${delay} 秒打印一次`)
      log()
    }, delay * 1000)
  }

  log()

  return () => clearTimeout(timer)
}

const clearLoopMessage = loopMessage(1)
const clearLoopMessage2 = loopMessage(1.5)

clearLoopMessage() // 我們在任何時候都可以取消任何一個重復(fù)調(diào)用，而不影響其它的

這…… 實現(xiàn)是實現(xiàn)了，但是其它有更好的解決辦法：

const timer = setInterval(console.log, 1000, "每 1 秒鐘打印一次")

clearInterval(timer) // 隨時可以 `clearInterval` 清除

更加深入了認(rèn)識取消計時器（Cancel Timers）

上面的示例只是簡單的給我們展現(xiàn)了 setTimeout 以及 setInterval，也看到了，我們可以通過 clearTimeout 或者 clearInterval 取消計時器，但是關(guān)于計時器，遠(yuǎn)遠(yuǎn)不止這點知識，請看下面的代碼（請）：

const cancelImmediate = () => {
  const timerId = setTimeout(console.log, 0, "暫緩了 0 秒執(zhí)行")
  clearTimeout(timerId)
}

cancelImmediate() // 這里并不會有任何輸出

或者看下面這樣的代碼：

const cancelImmediate2 = () => setTimeout(console.log, 0, "暫緩了 0 秒執(zhí)行")

const timerId = cancelImmediate2()

clearTimeout(timerId)

請將上面的的任一代碼片段同時復(fù)制到瀏覽器的控制臺中（有多行復(fù)制多行）執(zhí)行，你會發(fā)現(xiàn)，兩個代碼片段都沒有任何輸出，這是為什么？

這是因為，Javascript 的運行機制導(dǎo)致，任何時刻都只能存在一個任務(wù)在進行，雖然我們調(diào)用的是暫緩 0 秒，但是，由于當(dāng)前的任務(wù)還沒有執(zhí)行完成，所以，setTimeout 中被暫緩的函數(shù)即使時間到了也不會被執(zhí)行，必須等到當(dāng)前的任務(wù)完全執(zhí)行完成，那么，再試著，上面的代碼分行復(fù)制到控制臺，看看結(jié)果是不是會打印出 暫緩了 0 秒執(zhí)行 了？答案是肯定的。

當(dāng)你一行一行復(fù)制執(zhí)行的時候， cancelImmediate2 執(zhí)行完成之后，當(dāng)前任務(wù)就已經(jīng)全部執(zhí)行完成了，所以開始執(zhí)行下一個任務(wù)（console.log 開始執(zhí)行）。

從上面的示例中，我們可以看出，setTimeout 其實是將一個任務(wù)安排進一個 Javascript 的任務(wù)隊列里面去，當(dāng)前面的所有任務(wù)都執(zhí)行完成之后，如果這個任務(wù)時間到了，那么就立即執(zhí)行，否則，繼續(xù)等待計時結(jié)束。

此時，你應(yīng)該發(fā)現(xiàn)，只要是 setTimeout 所暫緩的函數(shù)沒有被執(zhí)行（任務(wù)還沒有完成），那么，我們就可以隨時使用 clearTimeout 清除掉這個暫緩（將這條任務(wù)從隊列里面移除）

計時器是沒有任何保證的

通過前面的例子，我們知道了 setTimeout 的 delay 為 0 時，并不表示立馬就會執(zhí)行了，它必須等到所有的當(dāng)前任務(wù)（對于一個 JS 文件來講，就是需要執(zhí)行完當(dāng)前腳本中的所有調(diào)用）執(zhí)行完成之后都會執(zhí)行，而這里面就包括我們調(diào)用的 clearTimeout。

下面用一個示例來更清楚了說明這個問題：

setTimeout(console.log, 1000, "1 秒后執(zhí)行的")

// 開始時間
const startTime = new Date()
// 距離開始時間已經(jīng)過去幾秒
let secondsPassed = 0
while (true) {
  // 距離開始時間的毫秒數(shù)
  const duration = new Date() - startTime
  // 如果距離開始時間超過 5000 毫秒了， 則終止循環(huán)
  if (duration > 5000) {
    break
  } else {
    // 如果距離開始時間增長一秒，更新 secondsPassed
    if (Math.floor(duration / 1000) > secondsPassed) {
      secondsPassed = Math.floor(duration / 1000)
      console.log(`已經(jīng)過去 ${secondsPassed} 秒了。`)
    }
  }
}

你們猜上面這段代碼會有什么樣的輸出？是下面這樣的嗎？

1 秒后執(zhí)行的
已經(jīng)過去 1 秒了。
已經(jīng)過去 2 秒了。
已經(jīng)過去 3 秒了。
已經(jīng)過去 4 秒了。
已經(jīng)過去 5 秒了。

并不是這樣的，而是下面這樣的：

已經(jīng)過去 1 秒了。
已經(jīng)過去 2 秒了。
已經(jīng)過去 3 秒了。
已經(jīng)過去 4 秒了。
已經(jīng)過去 5 秒了。
1 秒后執(zhí)行的

怎么會這樣？這是因為 while(true) 這個循環(huán)必須要執(zhí)行超過 5 秒鐘的時間之后，才算當(dāng)前所有任務(wù)完成，在它 break 之前，其它所有的操作都是沒有用的，當(dāng)然，我們不會在開發(fā)的過程中去寫這樣的代碼，但是并不表示就不存在這樣的情況，想象以下下面這樣的場景：

setTimeout(somethingMustDoAfter1Seconds, 1000)

openFileSync("file more then 1gb")

這里面的 openFileSync 只是一個偽代碼，它表示我們需要同步進行一個特別費時的操作，這個操作很有可能會超過 1 秒，甚至更長的時間，但是上面那個 somethingMustDoAfter1Seconds 將一直處于掛起狀態(tài)，只要這個操作完成，它才有可能執(zhí)行，為什么叫有可能？那是因為，有可能還有別的任務(wù)又會占用資源。所以，我們可以將 setTimeout 理解為：計時結(jié)束是執(zhí)行任務(wù)的必要條件，但是不是任務(wù)是否執(zhí)行的決定性因素。

setTimeout(somethingMustDoAfter1Seconds, 1000) 的意思是，必須超過 1000 毫秒后，somethingMustDoAfter1Seconds 才允許執(zhí)行。

再來一個小挑戰(zhàn)

那如果我需要每一秒鐘都打印一句話怎么辦？從上面的示例中，已經(jīng)很明顯的看到了，setTimeout 是肯定解決不了這個問題了，不信我們可以試試下面這個代碼片段：

const log = (delay) => {
  timer = setTimeout(() => {
    console.log(`每 ${delay} 秒打印一次`)
    log(delay)
  }, delay * 1000)
}

log(1)

上面的代碼是沒有任何問題的，在瀏覽器的控制臺觀察，你會發(fā)現(xiàn)確實每一秒鐘都打印了一行，但是再試試下面這樣的代碼：

const log = (delay) => {
  timer = setTimeout(() => {
    console.log(`每 ${delay} 秒打印一次`)
    log(delay)
  }, delay * 1000)
}

const readLargeFileSync = () => {
  // 開始時間
  const startTime = new Date()
  // 距離開始時間已經(jīng)過去幾秒
  let secondsPassed = 0
  while (true) {
    // 距離開始時間的毫秒數(shù)
    const duration = new Date() - startTime
    // 如果距離開始時間超過 5000 毫秒了， 則終止循環(huán)
    if (duration > 5000) {
      break
    } else {
      // 如果距離開始時間增長一秒，更新 secondsPassed
      if (Math.floor(duration / 1000) > secondsPassed) {
        secondsPassed = Math.floor(duration / 1000)
        console.log(`已經(jīng)過去 ${secondsPassed} 秒了。`)
      }
    }
  }
}

log(1)

setTimeout(readLargeFileSync, 1300)

輸出結(jié)果是：

每 1 秒打印一次
已經(jīng)過去 1 秒了。
已經(jīng)過去 2 秒了。
已經(jīng)過去 3 秒了。
已經(jīng)過去 4 秒了。
已經(jīng)過去 5 秒了。
每 1 秒打印一次

第一秒的時候， log 執(zhí)行

第 1300 毫秒時，開始執(zhí)行 readLargeFileSync 這會需要整整 5 秒鐘的時間

第 2 秒的時候，log 執(zhí)行時間到了，但是當(dāng)前任務(wù)并沒有完成，所以，它不會打印

第 5 秒的時候， readLargeFileSync 執(zhí)行完成了，所以 log 繼續(xù)執(zhí)行

關(guān)于這個具體怎么實現(xiàn)，就不在本文討論了

最終，到底是誰在調(diào)用那個被暫緩的函數(shù)？

當(dāng)我們在一個 function 中調(diào)用 this 時，this 關(guān)鍵字會指向當(dāng)前函數(shù)的 caller：

function whoCallsMe() {
  console.log("My caller is: ", this)
}

當(dāng)我們在瀏覽器的控制臺中調(diào)用 whoCallsMe 時，會打印出 Window，當(dāng)在 Node.js 的 REPL 中執(zhí)行時，會執(zhí)行出 global，如果我們將 whoCallsMe 設(shè)置為一個對象的屬性：

function whoCallsMe() {
  console.log("My caller is: ", this)
}

const person = {
  name: "Tao Pan",
  whoCallsMe
}

person.whoCallsMe()

這會打印出：My caller is: Object { name: "Tao Pan", whoCallsMe: whoCallsMe() }

那么？

function whoCallsMe() {
  console.log("My caller is: ", this)
}

const person = {
  name: "Tao Pan",
  whoCallsMe
}

setTimeout(person.whoCallsMe, 0)

這會打印出什么？這個很容易被忽視的問題，其實真的值得我們?nèi)ニ伎肌?/p>

請直接將上面這個代碼片段復(fù)制進瀏覽器的控制臺，看執(zhí)行的結(jié)果：

My caller is:  Window https://pantao.parcmg.com/admin/write-post.php?cid=2952

再打開系統(tǒng)終端，進入 Node.js REPL 中，執(zhí)行同樣的代碼，看執(zhí)行結(jié)果：

My caller is:  Timeout {
  _idleTimeout: 1,
  _idlePrev: null,
  _idleNext: null,
  _idleStart: 7052,
  _onTimeout: [Function: whoCallsMe],
  _timerArgs: undefined,
  _repeat: null,
  _destroyed: false,
  [Symbol(refed)]: true,
  [Symbol(asyncId)]: 221,
  [Symbol(triggerId)]: 5
}

回到這句話：當(dāng)我們在一個 function 中調(diào)用 this 時，this 關(guān)鍵字會指向當(dāng)前函數(shù)的 caller，當(dāng)我們使用 setTimeout 時，這個 caller 是跟當(dāng)前的運行時有關(guān)系的，如果我想 this 總是指向 person 對象呢？

function whoCallsMe() {
  console.log("My caller is: ", this)
}

const person = {
  name: "Tao Pan"
}
person.whoCallsMe = whoCallsMe.bind(person)

setTimeout(person.whoCallsMe, 0)

結(jié)語

標(biāo)題是寫上了 你需要知道的一切都在這里，但是如果有什么沒有考慮到了，歡迎大家指出。

云服務(wù)器 GPU云服務(wù)器 js定時器SetInterval 請檢查你的網(wǎng)絡(luò)或者防火墻設(shè)置 js定時器setTimeout 你知道

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106832.html

發(fā)表評論

登陸后可評論

0條評論

Warren

男|高級講師

我要關(guān)注我要私信

TA的文章

2021愛智先行者—設(shè)備到來之前的先導(dǎo)篇

閱讀 1253·2021-11-24 09:39
【干貨】十分鐘讀懂瀏覽器渲染流程

閱讀 391·2019-08-30 14:12
(譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

閱讀 2605·2019-08-30 13:10
SublimeText3系列（1）-安裝、設(shè)置、快捷鍵、常用插件

閱讀 2449·2019-08-30 12:44
花樣形狀 -- CSS

閱讀 974·2019-08-29 16:31
【只差一個小程序】介紹：簡介

閱讀 860·2019-08-29 13:10
XML基礎(chǔ)知識歸納

閱讀 2455·2019-08-27 10:57
尋找最長的單詞算法（JavaScript）

閱讀 3169·2019-08-26 13:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

setTimeout 或者 setInterval，關(guān)于 Javascript 計時器：你需要知道的

相關(guān)文章

**前端校招準(zhǔn)備系列--js中的setTimeout到底是什么？**

**由setTimeout深入JavaScript執(zhí)行環(huán)境的異步機制**

**徹底弄懂 JavaScript 執(zhí)行機制**

**這一次，徹底弄懂 JavaScript 執(zhí)行機制**

JavaScript的setTimeout和setInterval的深入理解

發(fā)表評論

0條評論

Warren

男|高級講師

TA的文章

2021愛智先行者—設(shè)備到來之前的先導(dǎo)篇

【干貨】十分鐘讀懂瀏覽器渲染流程

(譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

SublimeText3系列（1）-安裝、設(shè)置、快捷鍵、常用插件

花樣形狀 -- CSS

【只差一個小程序】介紹：簡介

XML基礎(chǔ)知識歸納

尋找最長的單詞算法（JavaScript）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

setTimeout 或者 setInterval，關(guān)于 Javascript 計時器：你需要知道的

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！