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

JavaScript是單線程運行的，沒有內置的sleep函數，現在模擬實現sleep延遲執行的效果。

使用睡眠函數實現紅綠燈代碼，紅燈2秒，黃燈1秒，綠燈3秒，循環改變顏色。

2. setTimeout

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

// setTimeoutlet fun = () => console.log(’time out’);let sleep = function(fun,time){ setTimeout(()=>{ fun(); },time);}sleep(fun,2000);setTimeoutsetTimeout是最基本的實現方式，代碼如下，使用遞歸來實現循環改變顏色：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方法異步的實現一種方式，借助Promise方法可以優雅的構建sleep實現方法，避免了使用函數回調的使用方式。

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

Promise

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

使用promise代替setTimeout，利用鏈式調用以及then來實現燈的轉換，then返回一個promise對象，當這個對象為resolve狀態then可以持續調用。

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實際上是generator和promise的語法糖，在提供同步編程方式實現異步調用的基礎上，同時滿足對sleep函數語義化的支持，也是常用的sleep的實現方式。

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

async await 使用

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

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);}參考文章：

紅綠燈紅綠燈

到此這篇關于JavaScript sleep睡眠函數的使用的文章就介紹到這了,更多相關JavaScript sleep睡眠函數內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！