js基礎進階--promise和setTimeout執行順序的問題

Integ 發布于2019-08-23 14:58 / 1931人閱讀

摘要：當主線程中的任務，都執行完之后，系統會依次讀取任務隊列里的事件。與之相對應的異步任務進入主線程，開始執行。結束資源地址基礎進階和執行順序的問題博客地址如果您對我的博客內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

歡迎訪問我的個人博客：http://www.xiaolongwu.cn

前言

promise為es6引進的語言標準，為異步編程的一種解決方案；

閱讀此文的前提是了解瀏覽器event loop的機制，還有promise的基本用法和特性，比如他自執行特性、狀態不可逆特性等

拋出問題

且看下面代碼和問題

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve){
    console.log(2)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(3)
}).then(function(){
    console.log(4)
});
console.log(5);
// 這的問題是，為什么答案是 2 3 5 4 1
// 而不是 2 3 5 1 4

既然promise.then和setTimeout都是異步的，那么在事件循環隊列中 promise.then的事件應該排在setTimeout后面，那為什么promise.then卻在setTimeout前面被打印了出來？

重要概念

event loop 的概念

Javascript是單線程的，所有的同步任務都會在主線程中執行。

當主線程中的任務，都執行完之后，系統會 “依次” 讀取任務隊列里的事件。與之相對應的異步任務進入主線程，開始執行。

異步任務之間，會存在差異，所以它們執行的優先級也會有區別。大致分為微任務（micro task，如：Promise、MutaionObserver等）和宏任務（macro task，如：setTimeout、setInterval、I/O等）。

Promise 執行器中的代碼會被同步調用，但是回調是基于微任務的。

宏任務的優先級高于微任務

每一個宏任務執行完畢都必須將當前的微任務隊列清空

第一個 script 標簽的代碼是第一個宏任務

主線程會不斷重復上面的步驟，直到執行完所有任務。

我的理解

我們來捋一遍代碼的執行過程，

所有的代碼都寫在script標簽中，所以讀取所有代碼是第一個宏任務，我們開始執行第一個宏任務。

我們首先遇到setTimeout，他是第二個宏任務，將它扔進宏任務事件隊列里先排隊。

下來我們遇到promise，promise執行器里的代碼會被同步調用，所以我們依次打印出2和3。

下來遇到promise的回調，他是一個微任務，將它扔進微任務事件對列中。

下來我們接著打印出5，然后執行微任務并且打印出4.

我們第一個宏任務執行完畢，執行下一個宏任務，打印出1，到此，所有任務都執行完畢。

所以我們最后的結果為2 3 5 4 1。

結束

github資源地址：js基礎進階--promise和setTimeout執行順序的問題

csdn博客地址：https://blog.csdn.net/wxl1555

如果您對我的博客內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：wuxiaolong802@163.com

GPU云服務器云服務器 js執行順序 js 指定執行順序 js沒有按順序執行 js沒有按順序執行嗎

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

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

前端基礎進階（十二）：深入核心，詳解事件循環機制

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

whjin 2019-08-21 18:31 評論0 收藏0
前端校招準備系列--js中的setTimeout到底是什么？

摘要：瀏覽器是多進程的，而瀏覽器的內核渲染進程是多線程的。如果已經將回調函數放進任務隊列，但是主線程正在執行一個非常耗時的任務，當這個任務執行完畢后，主線程去任務隊列中取任務，這個時候，就會出現連續執行的情況，也就是說相當于失效了。前言 ??在刷筆試題的時候，經常會碰到setTimeout的問題，只知道這個是設置定時器；但是考察的重點一般是在一個方法中包含了定時器，定時器中的打印和方法中打...

Godtoy 2019-08-23 13:41 評論0 收藏0
JavaScript 進階問題列表，你掌握了多少？

摘要：在第四次調用時，回調函數依然沒有返回值。累加器再次為，當前值為。經常寫業務就容易忽視對基礎知識的補充和加強，但在面試中，基礎知識點是非常重要的考核部分。本文要分享的是，一位開發者每天都會發布的 JavaScript 問題。有的容易，有的會有難度，對基礎知識的查缺補漏非常有幫助，也是你進階路上必然要掌握的知識。以下挑選了10個問題，緊跟其后的就是對這道題的詳細解答。如果你想看所有的題...

ethernet 2019-08-26 18:36 評論0 收藏0
JavaScript執行順序分析

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

chnmagnus 2019-08-21 17:50 評論0 收藏0
JavaScript 的事件機制

摘要：的事件機制關于，查閱多篇博客，或多或少總有些出入，在此寫下自己關于的理解按同步與異步分首先判斷是同步還是異步同步就進入主進程異步就進入異步任務在中注冊函數當滿足觸發條件后被推入同步任務進入主線程后一直執行直到主線程空閑時才會去中查看是否有可 JavaScript 的事件機制關于Event Loop，查閱多篇博客，或多或少總有些出入，在此寫下自己關于Event Loop的理解按同步與...

Turbo 2019-08-23 11:30 評論0 收藏0