2020-7-2 seo達人
JavaScript不具有 sleep() 函數(shù)，該函數(shù)會導致代碼在恢復執(zhí)行之前等待指定的時間段。如果需要JavaScript等待，該怎么做呢？
假設您想將三則消息記錄到Javascript控制臺，每條消息之間要延遲一秒鐘。JavaScript中沒有 sleep() 方法，所以你可以嘗試使用下一個最好的方法 setTimeout()。
不幸的是，setTimeout() 不能像你期望的那樣正常工作，這取決于你如何使用它。你可能已經(jīng)在JavaScript循環(huán)中的某個點上試過了，看到 setTimeout() 似乎根本不起作用。
問題的產生是由于將 setTimeout() 誤解為 sleep() 函數(shù)，而實際上它是按照自己的一套規(guī)則工作的。
在本文中，我將解釋如何使用 setTimeout()，包括如何使用它來制作一個睡眠函數(shù)，使JavaScript暫停執(zhí)行并在連續(xù)的代碼行之間等待。
瀏覽一下 setTimeout() 的文檔，它似乎需要一個 "延遲 "參數(shù)，以毫秒為單位。
回到原始問題，您嘗試調用 setTimeout(1000) 在兩次調用 console.log() 函數(shù)之間等待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() 不存在一樣。
回顧文檔，你會發(fā)現(xiàn)問題在于實際上第一個參數(shù)應該是函數(shù)調用，而不是延遲。畢竟，setTimeout() 實際上不是 sleep() 方法。
你重寫代碼以將回調函數(shù)作為第一個參數(shù)并將必需的延遲作為第二個參數(shù)：
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的日志信息在經(jīng)過1000ms（1秒）的單次延時后，會一起顯示，而不是每次重復調用之間延時1秒的理想效果。
在討論如何解決此問題之前，讓我們更詳細地研究一下 setTimeout() 函數(shù)。
檢查setTimeout ()
你可能已經(jīng)注意到上面第二個代碼片段中使用了箭頭函數(shù)。這些是必需的，因為你需要將匿名回調函數(shù)傳遞給 setTimeout()，該函數(shù)將在超時后運行要執(zhí)行的代碼。
在匿名函數(shù)中，你可以指定在超時時間后執(zhí)行的任意代碼：
// 使用箭頭語法的匿名回調函數(shù)。
setTimeout(() => console.log("你好!"), 1000)
// 這等同于使用function關鍵字
setTimeout(function() { console.log("你好!") }, 1000)
理論上，你可以只傳遞函數(shù)作為第一個參數(shù)，回調函數(shù)的參數(shù)作為剩余的參數(shù)，但對我來說，這似乎從來沒有正確的工作：
// 應該能用，但不能用
setTimeout(console.log, 1000, "你好")
人們使用字符串解決此問題，但是不建議這樣做。從字符串執(zhí)行JavaScript具有安全隱患，因為任何不當行為者都可以運行作為字符串注入的任意代碼。
// 應該沒用，但確實有用
setTimeout(`console.log("你好")`, 1000)
那么，為什么在我們的第一組代碼示例中 setTimeout() 失?。亢孟裎覀冊谡_使用它，每次都重復了1000ms的延遲。
原因是 setTimeout() 作為同步代碼執(zhí)行，并且對 setTimeout() 的多次調用均同時運行。每次調用 setTimeout() 都會創(chuàng)建異步代碼，該代碼將在給定延遲后稍后執(zhí)行。由于代碼段中的每個延遲都是相同的（1000毫秒），因此所有排隊的代碼將在1秒鐘的單個延遲后同時運行。
如前所述，setTimeout() 實際上不是 sleep() 函數(shù)，取而代之的是，它只是將異步代碼排入隊列以供以后執(zhí)行。幸運的是，可以使用 setTimeout() 在JavaScript中創(chuàng)建自己的 sleep() 函數(shù)。
如何編寫sleep函數(shù)
通過Promises，async 和 await 的功能，您可以編寫一個 sleep() 函數(shù)，該函數(shù)將按預期運行。
但是，你只能從 async 函數(shù)中調用此自定義 sleep() 函數(shù)，并且需要將其與 await 關鍵字一起使用。
這段代碼演示了如何編寫一個 sleep() 函數(shù)：
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() 函數(shù)的功能與您預期的完全一樣，因為 await 導致代碼的同步執(zhí)行暫停，直到Promise被解決為止。
一個簡單的選擇
另外，你可以在第一次調用 setTimeout() 時指定增加的超時時間。
以下代碼等效于上一個示例：
setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 2000)
setTimeout(() => console.log(3), 3000)
使用增加超時是可行的，因為代碼是同時執(zhí)行的，所以指定的回調函數(shù)將在同步代碼執(zhí)行的1、2和3秒后執(zhí)行。
它會循環(huán)運行嗎？
如你所料，以上兩種暫停JavaScript執(zhí)行的選項都可以在循環(huán)中正常工作。讓我們看兩個簡單的例子。
這是使用自定義 sleep() 函數(shù)的代碼段：
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)
}
我更喜歡后一種語法，特別是在循環(huán)中使用。
總結
JavaScript可能沒有 sleep() 或 wait() 函數(shù)，但是使用內置的 setTimeout() 函數(shù)很容易創(chuàng)建一個JavaScript，只要你謹慎使用它即可。
就其本身而言，setTimeout() 不能用作 sleep() 函數(shù)，但是你可以使用 async 和 await 創(chuàng)建自定義JavaScript sleep() 函數(shù)。
采用不同的方法，可以將交錯的（增加的）超時傳遞給 setTimeout() 來模擬 sleep() 函數(shù)。之所以可行，是因為所有對setTimeout() 的調用都是同步執(zhí)行的，就像JavaScript通常一樣。
希望這可以幫助你在代碼中引入一些延遲——僅使用原始JavaScript，而無需外部庫或框架。
藍藍設計( tweetduck.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務