宏任務與微任務

Blackjun 發布于2019-08-23 18:08 / 2070人閱讀

摘要：引言首先大家來看個面試題哈哈哈，各位有沒有很蒙圈在此先公布正確答案理論介紹要理解這個題目首先要清楚事件循環機制對于宏任務和微任務的處理。宏任務和微任務表示異步任務的兩種分類。

1 引言

首先大家來看個面試題：

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")

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

2 理論介紹

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

3 解析題目

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

GPU云服務器云服務器定時任務與觸發任務工作流任務和節點任務任務池任務堆棧

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

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

今天，我明白了JS事件循環機制

摘要：而這些隊列由的事件循環來搞定宏任務與微任務，在最新標準中，它們被分別稱為與。我們梳理一下事件循環的執行機制循環首先從宏任務開始，遇到，生成執行上下文，開始進入執行棧，可執行代碼入棧，依次執行代碼，調用完成出棧。寫在前面 js是一門單線程的編程語言，也就是說js在處理任務的時候，所有任務只能在一個線程上排隊被執行，那如果某一個任務耗時比較長呢？總不能等到它執行結束再去執行下一個。所以在...

maochunguang 2019-08-26 10:24 評論0 收藏0
JavaScript 的事件機制

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

Turbo 2019-08-23 11:30 評論0 收藏0
淺談JavaScript中的事件循環機制

摘要：事件循環背景是一門單線程非阻塞的腳本語言，單線程意味著，代碼在執行的任何時候，都只有一個主線程來處理所有的任務。在意識到該問題之際，新特性中的可以讓成為一門多線程語言，但實際開發中使用存在著諸多限制。這個地方被稱為執行棧。事件循環（Event Loop）背景 JavaScript是一門單線程非阻塞的腳本語言，單線程意味著，JavaScript代碼在執行的任何時候，都只有一個主線程來...

Pluser 2019-08-23 15:22 評論0 收藏0
前端中的事件循環eventloop機制

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

jsyzchen 2019-08-26 13:46 評論0 收藏0
JavaScript事件循環(Event Loop)

摘要：事件循環的順序，決定代碼執行的順序。輸出第二輪事件循環正式結束三第三輪事件循環第三輪事件循環從宏任務開始。記為遇到，立即執行回調函數放入中注冊，然后被分發到微任務事件隊列中。 1、為什么要有事件循環？因為js是單線程的，事件循環是js的執行機制，也是js實現異步的一種方法。既然js是單線程，那就像只有一個窗口的銀行，客戶需要排隊一個一個辦理業務，同理js任務也要一個一個順序執行。如...

dmlllll 2019-08-23 14:52 評論0 收藏0