您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關怎么在JavaScript中實現(xiàn)休眠或等待,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個參考,希望大家閱讀完這篇文章后對相關知識有一定的了解。
1、js屬于一種解釋性腳本語言;2、在絕大多數(shù)瀏覽器的支持下,js可以在多種平臺下運行,擁有著跨平臺特性;3、js屬于一種弱類型腳本語言,對使用的數(shù)據(jù)類型未做出嚴格的要求,能夠進行類型轉(zhuǎn)換,簡單又容易上手;4、js語言安全性高,只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互,從而有效地防止數(shù)據(jù)的丟失;5、基于對象的腳本語言,js不僅可以創(chuàng)建對象,也能使用現(xiàn)有的對象。
JavaScript不具有 sleep()函數(shù),該函數(shù)會導致代碼在恢復執(zhí)行之前等待指定的時間段。如果需要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}`) }
這段代碼的結(jié)果完全沒有延遲,就像 setTimeout() 不存在一樣。
回顧文檔,你會發(fā)現(xiàn)問題在于實際上第一個參數(shù)應該是函數(shù)調(diào)用,而不是延遲。畢竟,setTimeout() 實際上不是 sleep() 方法。
你重寫代碼以將回調(diào)函數(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秒)的單次延時后,會一起顯示,而不是每次重復調(diào)用之間延時1秒的理想效果。
在討論如何解決此問題之前,讓我們更詳細地研究一下 setTimeout() 函數(shù)。
你可能已經(jīng)注意到上面第二個代碼片段中使用了箭頭函數(shù)。這些是必需的,因為你需要將匿名回調(diào)函數(shù)傳遞給 setTimeout(),該函數(shù)將在超時后運行要執(zhí)行的代碼。
在匿名函數(shù)中,你可以指定在超時時間后執(zhí)行的任意代碼:
// 使用箭頭語法的匿名回調(diào)函數(shù)。 setTimeout(() => console.log("你好!"), 1000) // 這等同于使用function關鍵字 setTimeout(function() { console.log("你好!") }, 1000)
理論上,你可以只傳遞函數(shù)作為第一個參數(shù),回調(diào)函數(shù)的參數(shù)作為剩余的參數(shù),但對我來說,這似乎從來沒有正確的工作:
// 應該能用,但不能用 setTimeout(console.log, 1000, "你好")
人們使用字符串解決此問題,但是不建議這樣做。從字符串執(zhí)行JavaScript具有安全隱患,因為任何不當行為者都可以運行作為字符串注入的任意代碼。
// 應該沒用,但確實有用 setTimeout(`console.log("你好")`, 1000)
那么,為什么在我們的第一組代碼示例中 setTimeout() 失???好像我們在正確使用它,每次都重復了1000ms的延遲。
原因是 setTimeout() 作為同步代碼執(zhí)行,并且對 setTimeout() 的多次調(diào)用均同時運行。每次調(diào)用 setTimeout() 都會創(chuàng)建異步代碼,該代碼將在給定延遲后稍后執(zhí)行。由于代碼段中的每個延遲都是相同的(1000毫秒),因此所有排隊的代碼將在1秒鐘的單個延遲后同時運行。
如前所述,setTimeout() 實際上不是 sleep() 函數(shù),取而代之的是,它只是將異步代碼排入隊列以供以后執(zhí)行。幸運的是,可以使用 setTimeout() 在JavaScript中創(chuàng)建自己的 sleep() 函數(shù)。
通過Promises,async 和 await 的功能,您可以編寫一個 sleep() 函數(shù),該函數(shù)將按預期運行。
但是,你只能從 async 函數(shù)中調(diào)用此自定義 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被解決為止。
另外,你可以在第一次調(diào)用 setTimeout() 時指定增加的超時時間。
以下代碼等效于上一個示例:
setTimeout(() => console.log(1), 1000) setTimeout(() => console.log(2), 2000) setTimeout(() => console.log(3), 3000)
使用增加超時是可行的,因為代碼是同時執(zhí)行的,所以指定的回調(diào)函數(shù)將在同步代碼執(zhí)行的1、2和3秒后執(zhí)行。
如你所料,以上兩種暫停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) }
關于怎么在JavaScript中實現(xiàn)休眠或等待就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。