首頁(yè) 猿問(wèn) 關(guān)于Promise和setTime...

關(guān)于Promise和setTimeout的執(zhí)行順序，感覺(jué)自己理解的eventloop都是錯(cuò)的

JavaScript

ABOUTYOU 2019-05-09 08:05:14

看代碼：setTimeout(()=>{console.log(1);Promise.resolve().then(()=>{console.log(4);});});Promise.resolve().then(()=>{console.log(2);setTimeout(()=>{console.log(3);});});請(qǐng)輸出上面的執(zhí)行結(jié)果：...瀏覽器的輸出結(jié)果：2143，node的輸出結(jié)果為：2134這樣子就有點(diǎn)疑惑了。。。。2和1的順序能理解，但是4和3的順序，感覺(jué)和自己理解的知識(shí)發(fā)生沖突了，我的理解是代碼從上往下執(zhí)行，將第一個(gè)定時(shí)器，放到事件回調(diào)隊(duì)列中，將第一個(gè)peomise.then放到微任務(wù)中，然后執(zhí)行微任務(wù)中的代碼，先輸出2，然后將第二個(gè)定時(shí)器塞入事件回調(diào)隊(duì)列，此時(shí)主線程空閑，在事件回調(diào)隊(duì)列中取出第一個(gè)定時(shí)器的回調(diào)執(zhí)行，打印1，然后將promise放到微任務(wù)中，此時(shí)就出現(xiàn)分歧了，此時(shí)的主線程或者執(zhí)行棧是從微任務(wù)中取出promise來(lái)執(zhí)行打印4還是取出定時(shí)器的函數(shù)執(zhí)行打印3；從結(jié)果來(lái)看，執(zhí)行棧選擇了打印3，從餓了么團(tuán)隊(duì)的一篇文章中看到這樣一句話，node會(huì)清空當(dāng)前所處階段的隊(duì)列，即執(zhí)行所有task，再去檢查微任務(wù)望解惑，不論是瀏覽器或者node端，按我的思路道理都不通?。?

查看完整描述

2 回答

梵蒂岡之花

TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊

瀏覽器端循環(huán)策略：先執(zhí)行當(dāng)前循環(huán)宏任務(wù)，然后執(zhí)行這個(gè)宏任務(wù)下的微任務(wù)(h5)。node循環(huán)策略：先執(zhí)行完本次循環(huán)的timer隊(duì)列，然后執(zhí)行timer下的微任務(wù)(libuv)。以你這個(gè)例子來(lái)說(shuō)，宏任務(wù)有：當(dāng)前代碼塊，setTimeout，微任務(wù)有:Promise。所以，瀏覽器端的表現(xiàn)是先執(zhí)行整個(gè)代碼塊這個(gè)宏任務(wù)，然后執(zhí)行這個(gè)宏任務(wù)下的微任務(wù)，即本例當(dāng)中的（Promise.resolve().then），有且僅有這一個(gè)。因此，最先輸出2，本次循環(huán)結(jié)束。第二次循環(huán)找到宏任務(wù)(第一個(gè)setTimeout)，打印出1，然后執(zhí)行這個(gè)宏任務(wù)下的所有微任務(wù)，打印出4，第二次循環(huán)結(jié)束。第三次循環(huán)，找到第二個(gè)setTimeout,打印出3，第三次循環(huán)結(jié)束，所以瀏覽器端的輸出結(jié)果是2143。而node端的表現(xiàn)開始與瀏覽器相同，執(zhí)行整個(gè)代碼塊，完成微任務(wù)，輸出2。然后找到第二次循環(huán)下的兩個(gè)timer，依次輸出1,3.當(dāng)前層級(jí)的timer都執(zhí)行完畢之后，執(zhí)行timer微任務(wù)4,所以node端的輸出結(jié)果為2134。總結(jié)：瀏覽器:代碼塊（宏任務(wù)）=>微任務(wù)promise(輸出2)=>第一個(gè)timer(輸出1)=>微任務(wù)promise(輸出4)=>第二個(gè)timer（輸出3）node:代碼塊=>微任務(wù)promise(輸出2)=>第一個(gè)timer(輸出1)=>第二個(gè)timer（輸出3）=>微任務(wù)promise(輸出4)

反對(duì) 回復(fù) 2019-05-09

紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

setImmediate(()=>{console.log(1);process.nextTick(()=>{console.log(4);});});process.nextTick(()=>{console.log(2);setImmediate(()=>{console.log(3);});});這段代碼是那遍文章里面提到的,文章說(shuō)是輸出2134但是你會(huì)發(fā)現(xiàn)把它扔到node的最新版中輸出是2143舊一點(diǎn)的版本是2134這個(gè)表明node的異步執(zhí)行機(jī)制已經(jīng)改了,不是文章所說(shuō)那樣了