JavaScript中怎么利用sleep函數實(shí)現休眠或等待功能

JavaScript中怎么利用sleep函數實(shí)現休眠或等待功能，很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細講解，有這方面需求的人可以來(lái)學(xué)習下，希望你能有所收獲。

Ja使JavaScript暫停執行并在連續的代碼行之間等待。

瀏覽一下 setTimeout() 的文檔，它似乎需要一個(gè) "延遲 "參數，以毫秒為單位。

回到原始問(wèn)題，您嘗試調用 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}`) }

這段代碼的結果完全沒(méi)有延遲，就像 setTimeout() 不存在一樣。

回顧文檔，你會(huì )發(fā)現問(wèn)題在于實(shí)際上第一個(gè)參數應該是函數調用，而不是延遲。畢竟，setTimeout() 實(shí)際上不是 sleep() 方法。

你重寫(xiě)代碼以將回調函數作為第一個(gè)參數并將必需的延遲作為第二個(gè)參數：

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) }

這樣一來(lái)，三個(gè)console.log的日志信息在經(jīng)過(guò)1000ms(1秒)的單次延時(shí)后，會(huì )一起顯示，而不是每次重復調用之間延時(shí)1秒的理想效果。

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

檢查setTimeout ()

你可能已經(jīng)注意到上面第二個(gè)代碼片段中使用了箭頭函數。這些是必需的，因為你需要將匿名回調函數傳遞給  setTimeout()，該函數將在超時(shí)后運行要執行的代碼。

在匿名函數中，你可以指定在超時(shí)時(shí)間后執行的任意代碼：

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

理論上，你可以只傳遞函數作為第一個(gè)參數，回調函數的參數作為剩余的參數，但對我來(lái)說(shuō)，這似乎從來(lái)沒(méi)有正確的工作：

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

人們使用字符串解決此問(wèn)題，但是不建議這樣做。從字符串執行JavaScript具有安全隱患，因為任何不當行為者都可以運行作為字符串注入的任意代碼。

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

那么，為什么在我們的第一組代碼示例中 setTimeout() 失敗?好像我們在正確使用它，每次都重復了1000ms的延遲。

原因是 setTimeout() 作為同步代碼執行，并且對 setTimeout() 的多次調用均同時(shí)運行。每次調用 setTimeout()  都會(huì )創(chuàng )建異步代碼，該代碼將在給定延遲后稍后執行。由于代碼段中的每個(gè)延遲都是相同的(1000毫秒)，因此所有排隊的代碼將在1秒鐘的單個(gè)延遲后同時(shí)運行。

如前所述，setTimeout() 實(shí)際上不是 sleep() 函數，取而代之的是，它只是將異步代碼排入隊列以供以后執行。幸運的是，可以使用  setTimeout() 在JavaScript中創(chuàng )建自己的 sleep() 函數。

如何編寫(xiě)sleep函數

通過(guò)Promises，async 和 await 的功能，您可以編寫(xiě)一個(gè) sleep() 函數，該函數將按預期運行。

但是，你只能從 async 函數中調用此自定義 sleep() 函數，并且需要將其與 await關(guān)鍵字一起使用。

這段代碼演示了如何編寫(xiě)一個(gè) 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被解決為止。

一個(gè)簡(jiǎn)單的選擇

另外，你可以在第一次調用 setTimeout() 時(shí)指定增加的超時(shí)時(shí)間。

以下代碼等效于上一個(gè)示例：

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

使用增加超時(shí)是可行的，因為代碼是同時(shí)執行的，所以指定的回調函數將在同步代碼執行的1、2和3秒后執行。

它會(huì )循環(huán)運行嗎?

如你所料，以上兩種暫停JavaScript執行的選項都可以在循環(huán)中正常工作。讓我們看兩個(gè)簡(jiǎn)單的例子。

這是使用自定義 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()

這是一個(gè)簡(jiǎn)單的使用增加超時(shí)的代碼片段：

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

我更喜歡后一種語(yǔ)法，特別是在循環(huán)中使用。

總結

JavaScript可能沒(méi)有 sleep() 或 wait() 函數，但是使用內置的 setTimeout()  函數很容易創(chuàng )建一個(gè)JavaScript，只要你謹慎使用它即可。

就其本身而言，setTimeout() 不能用作 sleep() 函數，但是你可以使用 async 和 await 創(chuàng )建自定義JavaScript  sleep() 函數。

采用不同的方法，可以將交錯的(增加的)超時(shí)傳遞給 setTimeout() 來(lái)模擬 sleep() 函數。之所以可行，是因為所有對setTimeout()  的調用都是同步執行的，就像JavaScript通常一樣。