99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

如何使JavaScript休眠或等待

2020-7-2 seo達(dá)人

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

假設(shè)您想將三則消息記錄到Javascript控制臺(tái)，每條消息之間要延遲一秒鐘。JavaScript中沒(méi)有 sleep() 方法，所以你可以嘗試使用下一個(gè)最好的方法 setTimeout()。

不幸的是，setTimeout() 不能像你期望的那樣正常工作，這取決于你如何使用它。你可能已經(jīng)在JavaScript循環(huán)中的某個(gè)點(diǎn)上試過(guò)了，看到 setTimeout() 似乎根本不起作用。

問(wèn)題的產(chǎn)生是由于將 setTimeout() 誤解為 sleep() 函數(shù)，而實(shí)際上它是按照自己的一套規(guī)則工作的。

在本文中，我將解釋如何使用 setTimeout()，包括如何使用它來(lái)制作一個(gè)睡眠函數(shù)，使JavaScript暫停執(zhí)行并在連續(xù)的代碼行之間等待。

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

回到原始問(wèn)題，您嘗試調(diào)用 setTimeout(1000) 在兩次調(diào)用 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}`)

}

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

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

你重寫(xiě)代碼以將回調(diào)函數(shù)作為第一個(gè)參數(shù)并將必需的延遲作為第二個(gè)參數(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)

}

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

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

檢查setTimeout ()

你可能已經(jīng)注意到上面第二個(gè)代碼片段中使用了箭頭函數(shù)。這些是必需的，因?yàn)槟阈枰獙⒛涿卣{(diào)函數(shù)傳遞給 setTimeout()，該函數(shù)將在超時(shí)后運(yùn)行要執(zhí)行的代碼。

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

// 使用箭頭語(yǔ)法的匿名回調(diào)函數(shù)。

setTimeout(() => console.log("你好!"), 1000)

// 這等同于使用function關(guān)鍵字

setTimeout(function() { console.log("你好!") }, 1000)

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

// 應(yīng)該能用，但不能用

setTimeout(console.log, 1000, "你好")

人們使用字符串解決此問(wèn)題，但是不建議這樣做。從字符串執(zhí)行JavaScript具有安全隱患，因?yàn)槿魏尾划?dāng)行為者都可以運(yùn)行作為字符串注入的任意代碼。

// 應(yīng)該沒(méi)用，但確實(shí)有用

setTimeout(`console.log("你好")`, 1000)

那么，為什么在我們的第一組代碼示例中 setTimeout() 失敗？好像我們?cè)谡_使用它，每次都重復(fù)了1000ms的延遲。

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

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

如何編寫(xiě)sleep函數(shù)

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

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

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