/

探索JavaScript定時器

探索JavaScript定時器

在編寫JavaScript代碼時，您可能需要延遲函數的執行。了解如何使用setTimeout和setInterval在未來安排函數的執行。

setTimeout()

在編寫JavaScript代碼時，您可能需要延遲函數的執行。

這就是setTimeout的工作。您指定一個將要延遲執行的回調函數，以及以毫秒表示的延遲時間：

1
2
3
4
5
6
7
setTimeout(() => {
 // 2秒後執行
}, 2000)

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

這個語法定義了一個新函數。您可以在其中調用任何其他函數，或者可以傳遞一個現有的函數名稱和一組參數：

1
2
3
4
5
6
const myFunction = (firstParam, secondParam) => {
 // 做些事情
}

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

setTimeout返回計時器id。這通常不會使用，但您可以存儲這個id，如果要刪除該計劃的函數執行，則可以清除它：

1
2
3
4
5
6
const id = setTimeout(() => {
 // 應該在2秒後執行
}, 2000)

// 我改變了主意
clearTimeout(id)

零延遲

如果將延遲時間設置為0，則回調函數將盡快執行，但在當前函數執行之後執行：

1
2
3
4
5
setTimeout(() => {
 console.log('after ')
}, 0)

console.log(' before ')

將打印before after。

這對於避免在密集任務上阻塞CPU並在執行繁重計算時讓其他函數執行非常有用，通過在調度程序中對函數進行排隊。

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

setInterval()

setInterval是一個與setTimeout類似的函數，但有一個區別：它不僅運行一次回調函數，而是以您指定的特定時間間隔（以毫秒為單位）無限次運行：

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

上面的函數每2秒運行一次，除非您使用clearInterval告訴它停止運行，並將其傳遞給setInterval返回的間隔id：

1
2
3
4
5
const id = setInterval(() => {
 // 每2秒運行一次
}, 2000)

clearInterval(id)

通常在setInterval回調函數內部調用clearInterval，讓它自動判定是否應該再次運行或停止運行。例如，此代碼運行某些內容，除非App.somethingIWait的值為arrived：

1
2
3
4
5
6
7
const interval = setInterval(() => {
 if (App.somethingIWait === 'arrived') {
 clearInterval(interval)
 return
 }
 // 否則執行一些操作
}, 100)

遞迴setTimeout

setInterval每n毫秒開始一個函數，並不考慮函數是否完成執行。

如果函數始終需要相同的時間，就沒有問題：

setInterval正常工作

也許該函數的執行時間不同，取決於網絡狀況，例如：

setInterval執行時間不確定

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

setInterval重疊

為了避免這種情況，您可以安排一個遞迴setTimeout在回調函數完成時調用：

1
2
3
4
5
6
7
8
9
const myFunction = () => {
 // 做些事情

 setTimeout(myFunction, 1000)
}

setTimeout(
 myFunction()
}, 1000)

實現這種情況：

遞迴setTimeout

setTimeout和setInterval在Node.js中可用，通過Timers模塊提供。

Node.js還提供了setImmediate()，它等同於使用setTimeout(() => {}, 0)，主要用於與Node.js事件循環一起使用。

tags: [“JavaScript”, “Timers”, “setTimeout”, “setInterval”, “recursive setTimeout”]