怎么在JavaScript中實現休眠或等待

這篇文章將為大家詳細講解有關怎么在JavaScript中實現休眠或等待，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

JavaScript有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。

概述

JavaScript不具有 sleep()函數，該函數會導致代碼在恢復執行之前等待指定的時間段。如果需要JavaScript等待，該怎么做呢？

假設您想將三則消息記錄到Javascript控制臺，每條消息之間要延遲一秒鐘。JavaScript中沒有 sleep() 方法，所以你可以嘗試使用下一個最好的方法 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中實現休眠或等待就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。