JS中實(shí)現(xiàn)類似sleep、wait、delay的延時(shí)功能實(shí)例代碼
前言
編寫(xiě)代碼時(shí)很多時(shí)候需要進(jìn)行流程化的操作,各個(gè)流程間通常需要等待一定時(shí)間,這在很多語(yǔ)言中通??梢允褂?nbsp;sleep
、 wait
、 delay
等函數(shù)來(lái)實(shí)現(xiàn)。JavaScript原生并沒(méi)有類似的功能,想要延時(shí)通常就是使用 setTimeout(functionRef, delay)
方法。該方法使用比較簡(jiǎn)單,但是當(dāng)一個(gè)流程中如果需要多次延時(shí),就會(huì)出現(xiàn)回調(diào)地獄:
setTimeout(() => { console.log(`first print`); setTimeout(() => { console.log(`second print`); setTimeout(() => { console.log(`third print`); }, 1000); }, 1000); }, 1000);
這種寫(xiě)法代碼可讀性和可維護(hù)性非常差,這種應(yīng)用場(chǎng)景下使用很多支持多線程的語(yǔ)言中的延時(shí)函數(shù)就會(huì)方便很多?,F(xiàn)在JS中加入了很多新的語(yǔ)法功能,可以方便的改造現(xiàn)有方法來(lái)實(shí)現(xiàn)類似其他語(yǔ)言中 sleep
、 wait
、 delay
的功能。
實(shí)現(xiàn)代碼
具體的實(shí)現(xiàn)方法可能有非常多種,這里使用 Promise
、async/await
來(lái)實(shí)現(xiàn)相關(guān)功能,主要代碼如下:
// 實(shí)現(xiàn)sleep功能,使用方式下面方式調(diào)用 // async function process(){ // // your code ... // await sleep(1000); // // your code ... // } function sleep(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, ms); }); }
使用演示
上面演示中使用的完整代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <script> function getTimeStr(params) { let now = new Date(); let year = now.getFullYear(); let month = String(now.getMonth() + 1).padStart(2, '0'); let day = String(now.getDate()).padStart(2, '0'); let hours = String(now.getHours()).padStart(2, '0'); let minutes = String(now.getMinutes()).padStart(2, '0'); let seconds = String(now.getSeconds()).padStart(2, '0'); let milliseconds = String(now.getMilliseconds()).padStart(3, '0'); let formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`; return formattedTime; } </script> <script> // 實(shí)現(xiàn)sleep功能,使用方式下面方式調(diào)用 // async function process(){ // // your code ... // await sleep(1000); // // your code ... // } function sleep(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, ms); }); } </script> <script> (async () => { await sleep(1000); console.log(`${getTimeStr()} > first print`); await sleep(1000); console.log(`${getTimeStr()} > second print`); await sleep(1000); console.log(`${getTimeStr()} > third print`); })() </script> </head> <body> </body> </html>
總結(jié)
到此這篇關(guān)于JS中實(shí)現(xiàn)類似sleep、wait、delay的延時(shí)功能的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)sleep、wait、delay延時(shí)功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳
這篇文章主要介紹了bootstrapfileinput實(shí)現(xiàn)文件自動(dòng)上傳,bootstrap fileinput插件對(duì)多種類型的文件提供文件預(yù)覽,并且提供了多選等功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了基于slideout.js實(shí)現(xiàn)移動(dòng)端側(cè)邊欄滑動(dòng)特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11CodeMirror實(shí)現(xiàn)代碼對(duì)比功能(插件react vue)
這篇文章主要介紹了CodeMirror實(shí)現(xiàn)代碼對(duì)比功能,用到的插件有vue或者react都需要這一步且同樣的下載方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05微信小程序獲取微信運(yùn)動(dòng)步數(shù)的實(shí)例代碼
本篇文章主要介紹了微信小程序微信運(yùn)動(dòng)步數(shù)的實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07js導(dǎo)出excel文件的簡(jiǎn)潔方法(推薦)
下面小編就為帶來(lái)一篇js導(dǎo)出excel文件的簡(jiǎn)潔方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11微信小程序input框中加入小圖標(biāo)的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序input框中加入小圖標(biāo)的實(shí)現(xiàn)方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06