使用JavaScript實作休眠或等待-js教程-PHP中文網

使用JavaScript實作休眠或等待

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)

登入後複製

使用增加逾時是可行的，因為程式碼是同時執行的，所以指定的回呼函數將在同步程式碼執行的1、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，而无需外部库或框架。

祝您编码愉快！

英文原文地址：https://medium.com/dev-genius/how-to-make-javascript-sleep-or-wait-d95d33c99909

作者：Dr. Derek Austin

更多编程相关知识，请访问：编程视频！！

以上是使用JavaScript實作休眠或等待的詳細內容。更多資訊請關注PHP中文網其他相關文章！