JavaScript sleep睡眠函數的使用
1.sleep函數
JavaScript是單線程運行的,沒有內置的sleep函數,現在模擬實現sleep延遲執行的效果。
使用睡眠函數實現紅綠燈代碼,紅燈2秒,黃燈1秒,綠燈3秒,循環改變顏色。
2. setTimeout
直接使用setTimeout實現sleep()的方法,兼容性最好,但是使用瞭回調函數的實現方式,代碼的可讀性和維護性不是很好。
// setTimeout let fun = () => console.log('time out'); let sleep = function(fun,time){ setTimeout(()=>{ fun(); },time); } sleep(fun,2000); setTimeout setTimeout是最基本的實現方式,代碼如下,使用遞歸來實現循環改變顏色: 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實現方法,避免瞭使用函數回調的使用方式。
// promise let 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 await async 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睡眠函數內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue中的同步調用和異步調用方式
- es7中的async、await使用方法示例詳解
- Nodejs新特性async和await的使用詳解
- 如何使JavaScript休眠或等待
- js promise 中使用 setTimeout 實現暫停執行的效果