目錄1.sleep函數(shù)2. setTimeout3.Promise 4. async await5. 1s后輸出1 2s后輸出2 3s后輸出3參考文章：1.sleep函數(shù)

JavaScript是單線程運(yùn)行的，沒有內(nèi)置的sleep函數(shù)，現(xiàn)在模擬實(shí)現(xiàn)sleep延遲執(zhí)行的效果。

使用睡眠函數(shù)實(shí)現(xiàn)紅綠燈代碼，紅燈2秒，黃燈1秒，綠燈3秒，循環(huán)改變顏色。

2. setTimeout

直接使用setTimeout實(shí)現(xiàn)sleep()的方法，兼容性最好，但是使用了回調(diào)函數(shù)的實(shí)現(xiàn)方式，代碼的可讀性和維護(hù)性不是很好。

// setTimeoutlet fun = () => console.log(’time out’);let sleep = function(fun,time){ setTimeout(()=>{ fun(); },time);}sleep(fun,2000);setTimeoutsetTimeout是最基本的實(shí)現(xiàn)方式，代碼如下，使用遞歸來實(shí)現(xiàn)循環(huán)改變顏色：function changeColor(color) { console.log(’traffic-light ’, color);}function main() { changeColor(’red’); setTimeout(()=>{ changeColor(’yellow’); setTimeout(() => { changeColor(’green’); setTimeout(main, 2000); }, 1000); }, 2000);}main();3.Promise

在ES6的語法中，Promise是sleep方法異步的實(shí)現(xiàn)一種方式，借助Promise方法可以優(yōu)雅的構(gòu)建sleep實(shí)現(xiàn)方法，避免了使用函數(shù)回調(diào)的使用方式。

// promiselet fun = () => console.log(’time out’);let sleep2= (time)=> new Promise((resolve)=>{ setTimeout(resolve,time)})sleep2(2000).then(fun);

Promise

使用Promise，把下一次的顏色改變寫在then里面，最后同樣使用遞歸完成循環(huán)。

使用promise代替setTimeout，利用鏈?zhǔn)秸{(diào)用以及then來實(shí)現(xiàn)燈的轉(zhuǎn)換，then返回一個(gè)promise對象，當(dāng)這個(gè)對象為resolve狀態(tài)then可以持續(xù)調(diào)用。

const traffic_light=(color,duration)=>{ return new Promise((resolve,reject)=>{ console.log(’traffic-light ’, color); setTimeout(()=>{resolve() },duration) })}const main=()=>{ Promise.resolve() .then(()=>{return traffic_light(’red’,3000) }) .then(()=>{return traffic_light(’yellow’,1000) }) .then(()=>{return traffic_light(’green’,2000) }) .then(()=>{main(); })}main()4. async await

async await實(shí)際上是generator和promise的語法糖，在提供同步編程方式實(shí)現(xiàn)異步調(diào)用的基礎(chǔ)上，同時(shí)滿足對sleep函數(shù)語義化的支持，也是常用的sleep的實(shí)現(xiàn)方式。

// async awaitasync function wait(time){ await sleep2(time); fun();}wait(3000);

async await 使用

使用async await就可以避免Promise的一連串.then.then.then，也不再需要遞歸，使用while(true)就可以實(shí)現(xiàn)循環(huán)。

function sleep(duration) { return new Promise(resolve => { setTimeout(resolve, duration); })}async function changeColor(color, duration) { console.log(’traffic-light ’, color); await sleep(duration);}async function main() { while (true) { await changeColor(’red’, 2000); await changeColor(’yellow’, 1000); await changeColor(’green’, 3000); }}main();5. 1s后輸出1 2s后輸出2 3s后輸出3

const log = console.log;const sleep = (timeout) => { return new Promise((resolve)=>{ setTimeout(()=>{ resolve(); }, timeout) })}const main = async()=>{ await sleep(1000); log(1); await sleep(2000); log(2); await sleep(3000); log(3);}參考文章：

紅綠燈紅綠燈

到此這篇關(guān)于JavaScript sleep睡眠函數(shù)的使用的文章就介紹到這了,更多相關(guān)JavaScript sleep睡眠函數(shù)內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！