如何使JavaScript休眠或等待

來源： https://medium.com/dev-genius，做者：Dr. Derek Austin，翻譯：公衆號《前端全棧開發者》

JavaScript不具備 sleep() 函數，該函數會致使代碼在恢復執行以前等待指定的時間段。若是須要JavaScript等待，該怎麼作呢？

假設您想將三則消息記錄到Javascript控制檯，每條消息之間要延遲一秒鐘。JavaScript中沒有 sleep() 方法，因此你能夠嘗試使用下一個最好的方法 setTimeout()。

不幸的是，setTimeout() 不能像你指望的那樣正常工做，這取決於你如何使用它。你可能已經在JavaScript循環中的某個點上試過了，看到 setTimeout() 彷佛根本不起做用。

問題的產生是因爲將 setTimeout() 誤解爲 sleep() 函數，而實際上它是按照本身的一套規則工做的。

在本文中，我將解釋如何使用 setTimeout()，包括如何使用它來製做一個睡眠函數，使JavaScript暫停執行並在連續的代碼行之間等待。

---

瀏覽一下 setTimeout() 的文檔，它彷佛須要一個 "延遲 "參數，以毫秒爲單位。

回到原始問題，您嘗試調用 setTimeout(1000) 在兩次調用 console.log() 函數之間等待1秒。

不幸的是 setTimeout() 不能這樣工做：

setTimeout(1000)
console.log(1)
setTimeout(1000)
console.log(2)
setTimeout(1000)
console.log(3)

for (let i = 0; i <= 3; i++) {
  setTimeout(1000)
  console.log(`#${i}`)
}

這段代碼的結果徹底沒有延遲，就像 setTimeout() 不存在同樣。

回顧文檔，你會發現問題在於實際上第一個參數應該是函數調用，而不是延遲。畢竟，setTimeout() 實際上不是 sleep() 方法。

你重寫代碼以將回調函數做爲第一個參數並將必需的延遲做爲第二個參數：

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 1000)
setTimeout(() => console.log(3), 1000)

for (let i = 0; i <= 3; i++) {
  setTimeout(() => console.log(`#${i}`), 1000)
}

這樣一來，三個console.log的日誌信息在通過1000ms（1秒）的單次延時後，會一塊兒顯示，而不是每次重複調用之間延時1秒的理想效果。

在討論如何解決此問題以前，讓咱們更詳細地研究一下 setTimeout() 函數。

檢查setTimeout ()

你可能已經注意到上面第二個代碼片斷中使用了箭頭函數。這些是必需的，由於你須要將匿名回調函數傳遞給 setTimeout()，該函數將在超時後運行要執行的代碼。

在匿名函數中，你能夠指定在超時時間後執行的任意代碼：

// 使用箭頭語法的匿名回調函數。
setTimeout(() => console.log("你好!"), 1000)
// 這等同於使用function關鍵字
setTimeout(function() { console.log("你好!") }, 1000)

理論上，你能夠只傳遞函數做爲第一個參數，回調函數的參數做爲剩餘的參數，但對我來講，這彷佛曆來沒有正確的工做：

// 應該能用，但不能用
setTimeout(console.log, 1000, "你好")

人們使用字符串解決此問題，可是不建議這樣作。從字符串執行JavaScript具備安全隱患，由於任何不當行爲者均可以運行做爲字符串注入的任意代碼。

// 應該沒用，但確實有用
setTimeout(`console.log("你好")`, 1000)

那麼，爲何在咱們的第一組代碼示例中 setTimeout() 失敗？好像咱們在正確使用它，每次都重複了1000ms的延遲。

緣由是 setTimeout() 做爲同步代碼執行，而且對 setTimeout() 的屢次調用均同時運行。每次調用 setTimeout() 都會建立異步代碼，該代碼將在給定延遲後稍後執行。因爲代碼段中的每一個延遲都是相同的（1000毫秒），所以全部排隊的代碼將在1秒鐘的單個延遲後同時運行。

如前所述，setTimeout() 實際上不是 sleep() 函數，取而代之的是，它只是將異步代碼排入隊列以供之後執行。幸運的是，可使用 setTimeout() 在JavaScript中建立本身的 sleep() 函數。

如何編寫sleep函數

經過Promises，async 和 await 的功能，您能夠編寫一個 sleep() 函數，該函數將按預期運行。

可是，你只能從 async 函數中調用此自定義 sleep() 函數，而且須要將其與 await 關鍵字一塊兒使用。

這段代碼演示瞭如何編寫一個 sleep() 函數：

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

const repeatedGreetings = async () => {
  await sleep(1000)
  console.log(1)
  await sleep(1000)
  console.log(2)
  await sleep(1000)
  console.log(3)
}
repeatedGreetings()

此JavaScript sleep() 函數的功能與您預期的徹底同樣，由於 await 致使代碼的同步執行暫停，直到Promise被解決爲止。

一個簡單的選擇

另外，你能夠在第一次調用 setTimeout() 時指定增長的超時時間。

如下代碼等效於上一個示例：

setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 2000)
setTimeout(() => console.log(3), 3000)

使用增長超時是可行的，由於代碼是同時執行的，因此指定的回調函數將在同步代碼執行的一、2和3秒後執行。

它會循環運行嗎？

如你所料，以上兩種暫停JavaScript執行的選項均可以在循環中正常工做。讓咱們看兩個簡單的例子。

這是使用自定義 sleep() 函數的代碼段：

const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

async function repeatGreetingsLoop() {
  for (let i = 0; i <= 5; i++) {
      await sleep(1000)
    console.log(`Hello #${i}`)
    }
}
repeatGreetingsLoop()

這是一個簡單的使用增長超時的代碼片斷：

for (let i = 0; i <= 5; i++) {
  setTimeout(() => console.log(`Hello #${i}`), 1000 * i)
}

我更喜歡後一種語法，特別是在循環中使用。

總結

JavaScript可能沒有 sleep() 或 wait() 函數，可是使用內置的 setTimeout() 函數很容易建立一個JavaScript，只要你謹慎使用它便可。

就其自己而言，setTimeout() 不能用做 sleep() 函數，可是你可使用 async 和 await 建立自定義JavaScript sleep() 函數。

採用不一樣的方法，能夠將交錯的（增長的）超時傳遞給 setTimeout() 來模擬 sleep() 函數。之因此可行，是由於全部對setTimeout() 的調用都是同步執行的，就像JavaScript一般同樣。

但願這能夠幫助你在代碼中引入一些延遲——僅使用原始JavaScript，而無需外部庫或框架。

祝您編碼愉快！ 👍💻🔥😊🖖