探索 JavaScript 定時器

目錄

• setTimeout()

  • 零延遲
• setInterval()
• 遞迴的 setTimeout

setTimeout()

當編寫 JavaScript 程式碼時，可能希望延遲函式的執行。

這就是 setTimeout 的工作。 指定一個回撥函式以供稍後執行，並指定希望它稍後執行的時間（以毫秒為單位）的值：

setTimeout(() => {
  // 2 秒之後執行
}, 2000)

setTimeout(() => {
  // 50 毫秒之後執行
}, 50)
 

該語法定義了一個新的函式。 可以在其中呼叫所需的任何其他函式，也可以傳入現有的函式名稱和一組引數：

const myFunction = (firstParam, secondParam) => {
  // 做些事情
}

// 2 秒之後執行
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeout會返回定時器的 id。 通常不使用它，但是可以儲存此 id，並在要刪除此安排的函式執行時清除它：

const id = setTimeout(() => {
  // 應該在 2 秒之後執行
}, 2000)

// 改變主意了
clearTimeout(id)
 

零延遲

如果將超時延遲指定為0，則回撥函式會被儘快執行（但是是在當前函式執行之後）：

setTimeout(() => {
  console.log('後者 ')
}, 0)

console.log(' 前者 ')

會列印前者 後者。

通過在排程程式中排隊函式，可以避免在執行繁重的任務時阻塞 CPU，並在執行繁重的計算時執行其他函式。

某些瀏覽器（IE 和 Edge）實現的setImmediate()方法具有相同的確切功能，但是不是標準的，並且在其他瀏覽器上不可用。但是在 Node.js 中它是標準的函式。

setInterval()

setInterval是一個類似於setTimeout

setInterval(() => {
  // 每 2 秒執行一次
}, 2000)

上面的函式每隔 2 秒執行一次，除非使用clearInterval告訴它停止（傳入setInterval返回的間隔定時器 id）：

const id = setInterval(() => {
  // 每 2 秒執行一次
}, 2000)

clearInterval(id)

通常在setInterval回撥函式中呼叫clearInterval，以使其自行判斷是否應該再次執行或停止。 例如，此程式碼會執行某些事情，除非App.somethingIWait具有值arrived：

const interval = setInterval(() => {
  if (App.somethingIWait === 'arrived') {
    clearInterval(interval)
    return
  }
  // 否則做些事情
}, 100)

遞迴的 setTimeout

setInterval每 n 毫秒啟動一個函式，而無需考慮函式何時完成執行。

如果一個函式總是花費相同的時間，那就沒問題了：

函式可能需要不同的執行時間，這具體取決於網路條件，例如：

也許一個較長時間的執行會與下一次執行重疊：

為了避免這種情況，可以在回撥函式完成時安排要被呼叫的遞迴的 setTimeout：

const myFunction = () => {
  // 做些事情

  setTimeout(myFunction, 1000)
}

setTimeout(myFunction, 1000)

實現此方案：

setTimeout和setInterval可通過定時器模組在 Node.js 中使用。

Node.js 還提供setImmediate()（相當於使用setTimeout(() => {}, 0)），通常用於與 Node.js 事件迴圈配合使用。