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)
}
repeatedGreetings()
此JavaScript sleep() 函數(shù)的功能與您預(yù)期的完全一樣,因?yàn)?await 導(dǎo)致代碼的同步執(zhí)行暫停,直到Promise被解決為止。
一個(gè)簡(jiǎn)單的選擇
另外,你可以在第一次調(diào)用 setTimeout() 時(shí)指定增加的超時(shí)時(shí)間。
以下代碼等效于上一個(gè)示例:
setTimeout(() => console.log(1), 1000)
setTimeout(() => console.log(2), 2000)
setTimeout(() => console.log(3), 3000)
使用增加超時(shí)是可行的,因?yàn)榇a是同時(shí)執(zhí)行的,所以指定的回調(diào)函數(shù)將在同步代碼執(zhí)行的1、2和3秒后執(zhí)行。
它會(huì)循環(huán)運(yùn)行嗎?
如你所料,以上兩種暫停JavaScript執(zhí)行的選項(xiàng)都可以在循環(huán)中正常工作。讓我們看兩個(gè)簡(jiǎ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()
這是一個(gè)簡(jiǎn)單的使用增加超時(shí)的代碼片段:
for (let i = 0; i <= 5; i++) {
setTimeout(() => console.log(`Hello #${i}`), 1000 * i)
}
我更喜歡后一種語(yǔ)法,特別是在循環(huán)中使用。
總結(jié)
JavaScript可能沒(méi)有 sleep() 或 wait() 函數(shù),但是使用內(nèi)置的 setTimeout() 函數(shù)很容易創(chuàng)建一個(gè)JavaScript,只要你謹(jǐn)慎使用它即可。
就其本身而言,setTimeout() 不能用作 sleep() 函數(shù),但是你可以使用 async 和 await 創(chuàng)建自定義JavaScript sleep() 函數(shù)。
采用不同的方法,可以將交錯(cuò)的(增加的)超時(shí)傳遞給 setTimeout() 來(lái)模擬 sleep() 函數(shù)。之所以可行,是因?yàn)樗袑?duì)setTimeout() 的調(diào)用都是同步執(zhí)行的,就像JavaScript通常一樣。
希望這可以幫助你在代碼中引入一些延遲——僅使用原始JavaScript,而無(wú)需外部庫(kù)或框架。
藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com