promise與setTimeout的執行順序問題

Alliot 發布于2019-08-26 13:24 / 647人閱讀

摘要：輸出創建輸出第一個過程過后，已經輸出了第二步由于其他的優先級高于。此時中有兩個任務按照優先級高于所以先輸出，再輸出第三步，任務列表已經執行完畢，家下來執行由于的優先級高于，所以先輸出，再輸出。

有一次在面試題中有做到promise與setTimeout的執行順序，當時有點懵，執行順序還是弄錯了一點點，這里記錄下

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();

輸出結果

2.個人理解

首先執行同步代碼，然后以事件輪詢的方式執行異步代碼

promise中的異步體現在.then()和.catch()中

而promise中的function里的是同步代碼

上面的代碼是先執行promise里的同步代碼，然后執行腳本里本身的同步代碼

async無論方法是同步還是異步都可以用async關鍵字來進行標識

因為用async標識只是顯示表明在該方法內，可能會用到await關鍵字使其變為異步方法，而且將該異步方法進行了明確的劃分，只有用了await關鍵字時才是異步操作，其余一并為同步操作

同 Generator 函數一樣，async 函數返回一個 Promise 對象，可以使用 then 方法添加回調函數

當函數執行的時候，一旦遇到 await 就會先返回，等到觸發的異步操作完成，再接著執行函數體內后面的語句

await 命令后面的 Promise 對象，運行結果可能是 rejected，所以最好把 await 命令放在 try...catch 代碼塊中

3.其他

在網上還找到了一些資料

參考了這篇文章的一些內容 參考文章

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);

輸出結果： 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整體代碼被執行，執行過程為

創建setImmediate macro-task
創建setTimeout macro-task
創建micro-task Promise.then 的回調，并執行script console.log(3); resolve(); console.log(4); 此時輸出3和4，雖然resolve調用了，執行了但是整體代碼還沒執行完，無法進入Promise.then 流程。
console.log(6)輸出6
process.nextTick 創建micro-task
console.log(8) 輸出8

第一個過程過后，已經輸出了3 4 6 8

第二步. 由于其他micro-task 的優先級高于macro-task。

此時micro-task 中有兩個任務按照優先級process.nextTick 高于 Promise,所以先輸出7，再輸出5

第三步，micro-task 任務列表已經執行完畢，家下來執行macro-task. 由于setTimeout的優先級高于setIImmediate，所以先輸出2，再輸出1。

優先級： promise.Trick()>promise的回調>setTimeout>setImmediate

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

純css實現瀑布流（multi-column多列及flex布局）

實現多行文字及單行的省略號

微信小程序之購物車和父子組件傳值及calc的注意事項

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108748.html

用一道大廠面試題帶你搞懂事件循環機制

本文涵蓋面試題的引入對事件循環面試題執行順序的一些疑問通過面試題對微任務、事件循環、定時器等對深入理解結論總結面試題面試題如下，大家可以先試著寫一下輸出結果，然后再看我下面的詳細講解，看看會不會有什么出入，如果把整個順序弄清楚 Node.js 的執行順序應該就沒問題了。 async function async1(){ console.log(async1 start) ...

ShowerSun 2019-08-26 10:57 評論0 收藏0
一道setTimeout async promise執行順序的筆試題引發的思考

摘要：如果你要問他和誰當進去的快，要從下面兩個方面考慮結束時。至于什么，查了很多的資料，了解到一個瀏覽器環境只能有一個事件循環，而一個事件循環可以有多個任務隊列。 ====據說這是今日頭條去年的一道筆試題，主要考察的是setTimeout async promise執行順序～先雙手奉上這道題目～ async function async1() { consol...

soasme 2019-08-23 13:53 評論0 收藏0
JavaScript執行順序分析

摘要：每個線程的任務執行順序都是先進先出在運行的環境中，有一個負責程序本身的運行，作為主線程另一個負責主線程與其他線程的通信，被稱為線程。主線程繼續執行我是第一主線程執行完畢，從線程讀取回調函數。前言上星期面試被問到了事件執行順序的問題，想起來之前看《深入淺出Node.js》時看到這一章就忽略了，這次來分析一下JavaScript的事件執行順序。廢話少說，正題開始。單線程JavaScr...

chnmagnus 2019-08-21 17:50 評論0 收藏0
夯實基礎-JavaScript異步編程

摘要：調用棧被清空，消息隊列中并無任務，線程停止，事件循環結束。不確定的時間點請求返回，將設定好的回調函數放入消息隊列。調用棧執行完畢執行消息隊列任務。請求并發回調函數執行順序無法確定。異步編程 JavaScript中異步編程問題可以說是基礎中的重點，也是比較難理解的地方。首先要弄懂的是什么叫異步？我們的代碼在執行的時候是從上到下按順序執行，一段代碼執行了之后才會執行下一段代碼，這種方式...

shadowbook 2019-08-22 17:16 評論0 收藏0
前端基礎進階（十二）：深入核心，詳解事件循環機制

摘要：前端基礎進階正是圍繞這條線索慢慢展開，而事件循環機制，則是這條線索的最關鍵的知識點。特別是中正式加入了對象之后，對于新標準中事件循環機制的理解就變得更加重要。之后全局上下文進入函數調用棧。 showImg(https://segmentfault.com/img/remote/1460000008811705); JavaScript的學習零散而龐雜，因此很多時候我們學到了一些東西，但...

whjin 2019-08-21 18:31 評論0 收藏0