成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js基礎(chǔ)進階--promise和setTimeout執(zhí)行順序的問題

Integ / 1934人閱讀

摘要:當主線程中的任務(wù),都執(zhí)行完之后,系統(tǒng)會依次讀取任務(wù)隊列里的事件。與之相對應(yīng)的異步任務(wù)進入主線程,開始執(zhí)行。結(jié)束資源地址基礎(chǔ)進階和執(zhí)行順序的問題博客地址如果您對我的博客內(nèi)容有疑惑或質(zhì)疑的地方,請在下方評論區(qū)留言,或郵件給我,共同學習進步。

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

前言

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

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

拋出問題

且看下面代碼和問題

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都是異步的,那么在事件循環(huán)隊列中 promise.then的事件應(yīng)該排在setTimeout后面,那為什么promise.then卻在setTimeout前面被打印了出來?

重要概念

event loop 的概念

Javascript是單線程的,所有的同步任務(wù)都會在主線程中執(zhí)行。

當主線程中的任務(wù),都執(zhí)行完之后,系統(tǒng)會 “依次” 讀取任務(wù)隊列里的事件。與之相對應(yīng)的異步任務(wù)進入主線程,開始執(zhí)行。

異步任務(wù)之間,會存在差異,所以它們執(zhí)行的優(yōu)先級也會有區(qū)別。大致分為 微任務(wù)(micro task,如:Promise、MutaionObserver等)和宏任務(wù)(macro task,如:setTimeout、setInterval、I/O等)。

Promise 執(zhí)行器中的代碼會被同步調(diào)用,但是回調(diào)是基于微任務(wù)的。

宏任務(wù)的優(yōu)先級高于微任務(wù)

每一個宏任務(wù)執(zhí)行完畢都必須將當前的微任務(wù)隊列清空

第一個 script 標簽的代碼是第一個宏任務(wù)

主線程會不斷重復上面的步驟,直到執(zhí)行完所有任務(wù)。

我的理解

我們來捋一遍代碼的執(zhí)行過程,

所有的代碼都寫在script標簽中,所以讀取所有代碼是第一個宏任務(wù),我們開始執(zhí)行第一個宏任務(wù)。

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

下來我們遇到promise,promise執(zhí)行器里的代碼會被同步調(diào)用,所以我們依次打印出2和3。

下來遇到promise的回調(diào),他是一個微任務(wù),將它扔進微任務(wù)事件對列中。

下來我們接著打印出5,然后執(zhí)行微任務(wù)并且打印出4.

我們第一個宏任務(wù)執(zhí)行完畢,執(zhí)行下一個宏任務(wù),打印出1,到此,所有任務(wù)都執(zhí)行完畢。

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

結(jié)束

github資源地址:js基礎(chǔ)進階--promise和setTimeout執(zhí)行順序的問題

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

如果您對我的博客內(nèi)容有疑惑或質(zhì)疑的地方,請在下方評論區(qū)留言,或郵件給我,共同學習進步。

郵箱:[email protected]

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/101441.html

相關(guān)文章

  • 前端基礎(chǔ)進階(十二):深入核心,詳解事件循環(huán)機制

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

    whjin 評論0 收藏0
  • 前端校招準備系列--jssetTimeout到底是什么?

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

    Godtoy 評論0 收藏0
  • JavaScript 進階問題列表,你掌握了多少?

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

    ethernet 評論0 收藏0
  • JavaScript執(zhí)行順序分析

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

    chnmagnus 評論0 收藏0
  • JavaScript 事件機制

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

    Turbo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<