宏任務(wù)與微任務(wù)

Blackjun 發(fā)布于2019-08-23 18:08 / 2089人閱讀

摘要：引言首先大家來(lái)看個(gè)面試題哈哈哈，各位有沒(méi)有很蒙圈在此先公布正確答案理論介紹要理解這個(gè)題目首先要清楚事件循環(huán)機(jī)制對(duì)于宏任務(wù)和微任務(wù)的處理。宏任務(wù)和微任務(wù)表示異步任務(wù)的兩種分類(lèi)。

1 引言

首先大家來(lái)看個(gè)面試題：

console.log("sync1")
setTimeout(function() {
    console.log("setTimeOut1")
},0)
var promise = new Promise(function(resolve){
    setTimeout(function() {
        console.log("setTimeoutPromise")
    }, 0)
    console.log("promise")
    resolve()
})
promise.then(() => {
    console.log("proThen")
    setTimeout(()=>{
        console.log("proThenSta")
    },0)
})
setTimeout(function() {
    console.log("lastSetTimeOut")
},0)
console.log("sync2")

哈哈哈，各位有沒(méi)有很蒙圈？在此先公布正確答案：
sync1
promise
sync2
proThen
setTimeOut1
setTimeoutPromise
lastSetTimeOut
proThenSta

2 理論介紹

要理解這個(gè)題目首先要清楚事件循環(huán)機(jī)制對(duì)于宏任務(wù)和微任務(wù)的處理。宏任務(wù)和微任務(wù)表示異步任務(wù)的兩種分類(lèi)。在掛起任務(wù)時(shí)，JS引擎會(huì)將所有任務(wù)按照類(lèi)別分到這兩個(gè)隊(duì)列中，首先在宏任務(wù)的隊(duì)列（這個(gè)隊(duì)列也被叫做 task queue）中取出第一個(gè)任務(wù)，執(zhí)行完畢后取出微任務(wù)隊(duì)列中的所有任務(wù)順序執(zhí)行；之后再取宏任務(wù)任務(wù)，周而復(fù)始，直至兩個(gè)隊(duì)列的任務(wù)都取完。
常用的宏任務(wù)：整體代碼script、setTimeout、setInterval、setImmediate
常見(jiàn)的微任務(wù)：process.nextTick、MutationObserver、Promise.then catch finally

3 解析題目

首先第一遍同步執(zhí)行，創(chuàng)建第一個(gè)宏任務(wù)。這時(shí)首先打印了 sync1 promise sync2
此時(shí)then函數(shù)有了一個(gè)微任務(wù) 然后打印了proThen
同時(shí)創(chuàng)建了分別打印 setTimeOut1 setTimeoutPromise lastSetTimeOut 的三個(gè)宏任務(wù)
以及then函數(shù)里還有一個(gè)proThenSta 的宏任務(wù)
這幾個(gè)宏任務(wù)分別一次執(zhí)行，于是有了上面的答案

云服務(wù)器 GPU云服務(wù)器定時(shí)任務(wù)與觸發(fā)任務(wù) 工作流任務(wù)和節(jié)點(diǎn)任務(wù) 任務(wù)池任務(wù)堆棧

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104740.html

相關(guān)文章

今天，我明白了JS事件循環(huán)機(jī)制

摘要：而這些隊(duì)列由的事件循環(huán)來(lái)搞定宏任務(wù)與微任務(wù)，在最新標(biāo)準(zhǔn)中，它們被分別稱(chēng)為與。我們梳理一下事件循環(huán)的執(zhí)行機(jī)制循環(huán)首先從宏任務(wù)開(kāi)始，遇到，生成執(zhí)行上下文，開(kāi)始進(jìn)入執(zhí)行棧，可執(zhí)行代碼入棧，依次執(zhí)行代碼，調(diào)用完成出棧。寫(xiě)在前面 js是一門(mén)單線(xiàn)程的編程語(yǔ)言，也就是說(shuō)js在處理任務(wù)的時(shí)候，所有任務(wù)只能在一個(gè)線(xiàn)程上排隊(duì)被執(zhí)行，那如果某一個(gè)任務(wù)耗時(shí)比較長(zhǎng)呢？總不能等到它執(zhí)行結(jié)束再去執(zhí)行下一個(gè)。所以在...

maochunguang 2019-08-26 10:24 評(píng)論0 收藏0
JavaScript 的事件機(jī)制

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

Turbo 2019-08-23 11:30 評(píng)論0 收藏0
淺談JavaScript中的事件循環(huán)機(jī)制

摘要：事件循環(huán)背景是一門(mén)單線(xiàn)程非阻塞的腳本語(yǔ)言，單線(xiàn)程意味著，代碼在執(zhí)行的任何時(shí)候，都只有一個(gè)主線(xiàn)程來(lái)處理所有的任務(wù)。在意識(shí)到該問(wèn)題之際，新特性中的可以讓成為一門(mén)多線(xiàn)程語(yǔ)言，但實(shí)際開(kāi)發(fā)中使用存在著諸多限制。這個(gè)地方被稱(chēng)為執(zhí)行棧。事件循環(huán)（Event Loop）背景 JavaScript是一門(mén)單線(xiàn)程非阻塞的腳本語(yǔ)言，單線(xiàn)程意味著，JavaScript代碼在執(zhí)行的任何時(shí)候，都只有一個(gè)主線(xiàn)程來(lái)...

Pluser 2019-08-23 15:22 評(píng)論0 收藏0
前端中的事件循環(huán)eventloop機(jī)制

摘要：宏任務(wù)主要有整體代碼交互事件環(huán)境。按照中的定義告訴瀏覽器你希望執(zhí)行一個(gè)動(dòng)畫(huà)，并且要求瀏覽器在下次重繪之前調(diào)用指定的回調(diào)函數(shù)更新動(dòng)畫(huà)?？偨Y(jié)我們要記住最重要的兩點(diǎn)是單線(xiàn)程和的循環(huán)機(jī)制。 showImg(https://segmentfault.com/img/bVbsEQs?w=900&h=540); 我們知道 js 是單線(xiàn)程執(zhí)行的，那么異步的代碼 js 是怎么處理的呢？例如下面的代碼是如...

jsyzchen 2019-08-26 13:46 評(píng)論0 收藏0
JavaScript事件循環(huán)(Event Loop)

摘要：事件循環(huán)的順序，決定代碼執(zhí)行的順序。輸出第二輪事件循環(huán)正式結(jié)束三第三輪事件循環(huán)第三輪事件循環(huán)從宏任務(wù)開(kāi)始。記為遇到，立即執(zhí)行回調(diào)函數(shù)放入中注冊(cè)，然后被分發(fā)到微任務(wù)事件隊(duì)列中。 1、為什么要有事件循環(huán)？因?yàn)閖s是單線(xiàn)程的，事件循環(huán)是js的執(zhí)行機(jī)制，也是js實(shí)現(xiàn)異步的一種方法。既然js是單線(xiàn)程，那就像只有一個(gè)窗口的銀行，客戶(hù)需要排隊(duì)一個(gè)一個(gè)辦理業(yè)務(wù)，同理js任務(wù)也要一個(gè)一個(gè)順序執(zhí)行。如...

dmlllll 2019-08-23 14:52 評(píng)論0 收藏0