這篇文章主要介紹一篇文章幫你了解promise與setTimeout的執(zhí)行順序,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供淄博企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、網(wǎng)站建設(shè)、HTML5、小程序制作等業(yè)務(wù)。10年已為淄博眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。
有一次在面試題中有做到promise與setTimeout的執(zhí)行順序,當(dāng)時有點懵,執(zhí)行順序還是弄錯了一點點,這里記錄下
1.輸出
setTimeout(function() { console.log(111) }, 0); setTimeout(function() { console.log(333) }, 1000); new Promise(function(resolve){ console.log(444); resolve(); console.log(555); })。then(function(){ console.log(666); }); console.log(777); async function test1() { console.log("test1"); await test2(); console.log("test1 last"); } async function test2() { console.log("test2"); } test1();
輸出結(jié)果
2.個人理解
首先執(zhí)行同步代碼,然后以事件輪詢的方式執(zhí)行異步代碼
promise中的異步體現(xiàn)在。then()和。catch()中
而promise中的function里的是同步代碼
上面的代碼是先執(zhí)行promise里的同步代碼,然后執(zhí)行腳本里本身的同步代碼
async無論方法是同步還是異步都可以用async關(guān)鍵字來進行標(biāo)識
因為用async標(biāo)識只是顯示表明在該方法內(nèi),可能會用到await關(guān)鍵字使其變?yōu)楫惒椒椒ǎ覍⒃摦惒椒椒ㄟM行了明確的劃分,只有用了await關(guān)鍵字時才是異步操作,其余一并為同步操作
同 Generator 函數(shù)一樣,async 函數(shù)返回一個 Promise 對象,可以使用 then 方法添加回調(diào)函數(shù)
當(dāng)函數(shù)執(zhí)行的時候,一旦遇到 await 就會先返回,等到觸發(fā)的異步操作完成,再接著執(zhí)行函數(shù)體內(nèi)后面的語句
await 命令后面的 Promise 對象,運行結(jié)果可能是 rejected,所以最好把 await 命令放在 try…catch 代碼塊中
3.其他
在網(wǎng)上還找到了一些資料參考了這篇文章的一些內(nèi)容 參考文章
setImmediate(function(){ console.log(1); },0); setTimeout(function(){ console.log(2); },0); new Promise(function(resolve){ console.log(3); resolve(); console.log(4); })。then(function(){ console.log(5); }); console.log(6); process.nextTick(function(){ console.log(7); }); console.log(8);
輸出結(jié)果: 3 4 6 8 7 5 2 1
macro-task: script (整體代碼),setTimeout, setInterval, setImmediate, I/O, UI rendering.
micro-task: process.nextTick, Promise(原生),Object.observe,MutationObserver
第一步。 script整體代碼被執(zhí)行,執(zhí)行過程為
創(chuàng)建setImmediate macro-task
創(chuàng)建setTimeout macro-task
創(chuàng)建micro-task Promise.then 的回調(diào),并執(zhí)行script console.log(3); resolve(); console.log(4); 此時輸出3和4,雖然resolve調(diào)用了,執(zhí)行了但是整體代碼還沒執(zhí)行完,無法進入Promise.then 流程。
console.log(6)輸出6
process.nextTick 創(chuàng)建micro-task
console.log(8) 輸出8
第一個過程過后,已經(jīng)輸出了3 4 6 8
第二步。 由于其他micro-task 的 優(yōu)先級高于macro-task。
此時micro-task 中有兩個任務(wù)按照優(yōu)先級process.nextTick 高于 Promise,所以先輸出7,再輸出5
第三步,micro-task 任務(wù)列表已經(jīng)執(zhí)行完畢,家下來執(zhí)行macro-task. 由于setTimeout的優(yōu)先級高于setIImmediate,所以先輸出2,再輸出1。
優(yōu)先級: promise.Trick()>promise的回調(diào)>setTimeout>setImmediate
以上是“一篇文章幫你了解promise與setTimeout的執(zhí)行順序”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!