一道setTimeout async promise執行順序的筆試題引發的思考

soasme 發布于2019-08-23 13:53 / 1534人閱讀

摘要：如果你要問他和誰當進去的快，要從下面兩個方面考慮結束時。至于什么，查了很多的資料，了解到一個瀏覽器環境只能有一個事件循環，而一個事件循環可以有多個任務隊列。

====據說這是今日頭條去年的一道筆試題，主要考察的是setTimeout async promise執行順序

～先雙手奉上這道題目～

   async function async1() {
            console.log("async1 start");
            await  async2();
            console.log("async1 end");
 
        }
        async  function async2() {
           console.log( "async2");
        }
        console.log("script start");
        setTimeout(function () {
            console.log("settimeout");
        },0);
        async1();
        new Promise(function (resolve) {
            console.log("promise1");
            resolve();
        }).then(function () {
            console.log("promise2");
        });
        console.log("script end");

首先，我們先來了解幾個概念：

JS眾所周知是單線程語言，Javascript引擎同一時刻只能執行一個代碼塊，使用Event Loop作為它的異步執行機制

那么Event Loop是如何實現異步呢，個人淺顯的理解如下：

同步代碼按照上下文的順序放進主進程中去執行

異步函數放進異步隊列中，等待執行，在異步隊列執行的順序按照先進先出的原則

等主進程中的同步函數執行完畢后，輪詢去執行異步隊列中的異步函數

??注意： setTimeOut并不是直接的把你的回掉函數放進上述的異步隊列中去，而是在定時器的時間到了之后，把回掉函數放到執行異步隊列中去。如果此時這個隊列已經有很多任務了，那就排在他們的后面。這也就解釋了為什么setTimeOut為什么不能精準的執行的問題了。setTimeOut執行需要滿足兩個條件：

1. 主進程必須是空閑的狀態，如果到時間了，主進程不空閑也不會執行你的回掉函數 
2. 這個回掉函數需要等到插入異步隊列時前面的異步函數都執行完了，才會執行

理解了Eventloop異步實現的方式，再來補充一下promise、async/await

首先，new Promise是同步的任務，會被放到主進程中去立即執行。而.then()函數是異步任務會放到異步隊列中去，那什么時候放到異步隊列中去呢？當你的promise狀態結束的時候，就會立即放進異步隊列中去了。如果你要問他和setTimeOut誰當進去的快，要從下面兩個方面考慮：

1. promise結束時。.then內函數插入異步隊列的時間與setTimeOut的回掉函數插入隊列的時間，誰的早，誰的就最快
2. **如果promise是同步的而setTimeOut時間是0，那么是promise先執行**。至于什么，查了很多的資料，了解到：一個瀏覽器環境只能有一個事件循環，而一個事件循環可以有多個任務隊列。settimeout所在的隊列與promise.then()的隊列不同，面對此種情況，v8實現的時候會先從promise.then()的隊列取任務，但是并沒有很理解，如果有大佬愿意指點迷津，請留言告知

GPU云服務器云服務器 sql的執行順序 ecs安全組中規則的優先級執行匹配順序說明執行順序執行順序問

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

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

筆試題之Event Loop終極篇

摘要：下面開始分析開頭的代碼第一輪事件循環流程整體作為第一個宏任務進入主線程，遇到，輸出遇到函數聲明，聲明暫時不用管遇到，其回調函數被分發到微任務中。我們記為遇到，其回調函數被分發到宏任務中。先上一道常見的筆試題 console.log(1); async function async1() { console.log(2); await async2(); con...

niceforbear 2019-08-23 18:09 評論0 收藏0
JS異步筆試題

摘要：分析題目先執行微任務后執行宏任務因此結果為按照這個思路做以下題目做出如下更改運行結果為更改如下更改如下運行結果為運行結果為運行結果為參考自參考自https://github.com/Advanced-F... 以下是一道異步的筆試題,寫出運行結果: async function async1() { console.log(async1 start); await a...

Tangpj 2019-08-23 18:26 評論0 收藏0
promise、async和await之執行順序的那點事

摘要：是這樣描述的函數中可能會有表達式，這會使函數暫停執行，等待表達式中的解析完成后繼續執行函數并返回解決結果。返回值返回對象的處理結果。當執行到時，這個任務會被放入到回調隊列中，等待調用棧有空閑時事件循環再來取走它。原文地址：https://lvdingjin.github.io/tech/2018/05/27/async-and-await.html 故事要從一道今日頭條的筆試題說起...

高勝山 2019-08-22 17:36 評論0 收藏0
面試題之Event Loop終極篇

摘要：下面開始分析開頭的代碼第一輪事件循環流程整體作為第一個宏任務進入主線程，遇到，輸出遇到函數聲明，聲明暫時不用管遇到，其回調函數被分發到微任務中。我們記為遇到，其回調函數被分發到宏任務中。先上一道常見的筆試題 console.log(1); async function async1() { console.log(2); await async2(); con...

233jl 2019-08-23 18:09 評論0 收藏0
一道筆試題引發的Promise筆記

摘要：對象是一個返回值的代理，這個返回值在對象創建時未必已知。這使得異步方法可以像同步方法那樣返回值異步方法會返回一個包含了原返回值的對象來替代原返回值。前言近來參加校招筆試，發現有好幾道關于Promise的題目。然而我都沒有了解過。所以，這篇文章以網易筆試的一道題開始，記錄關于Promise的那些事。文章地址：http://lsxj615.com/2016/08/04... 筆試題 c...

_Suqin 2019-08-22 10:34 評論0 收藏0