首先看一段代碼

async function (){await f2()console.log(’f1’)}async function f2(){console.log(’f2’)}console.log(’正常1’)f1()setTimeout(()=>{console.log(’定時器’)})console.log(’正常2’)

正確的打印順序應該是：正常1，f2 ，正常2，f1，定時器

為什么會出現這樣打印順序呢

首先javascript是一門單線程語言，在最新的HTML5中提出了Web-Worker，但javascript是單線程這一核心仍未改變。既然js是單線程，那就像只有一個窗口的銀行，客戶需要排隊一個一個辦理業務，同理js任務也要一個一個順序執行。如果一個任務耗時過長，那么后一個任務也必須等著。所以就出現了同步任務和異步任務。

概念

除了廣義的同步任務和異步任務，對任務可以進行更精細的區分

macro-task(宏任務)：包括整體代碼script，setTimeout，setInterval micro-task(微任務)：Promise，process.nextTick

宏任務：瀏覽器為了能夠使得JS內部task與DOM任務能夠有序的執行，會在一個task執行結束后，在下一個 task 執行開始前，對頁面進行重新渲染 （task->渲染->task->…）

鼠標點擊會觸發一個事件回調，需要執行一個宏任務，然后解析HTMl

微任務：微任務通常來說就是需要在當前 同步任務 執行結束后立即執行的任務，比如對一系列動作做出反饋，或者是需要異步的執行任務而又不需要分配一個新的任務，這樣便可以減小一點性能的開銷。

既然我們清楚了概念，我們再看一遍代碼

async function (){await f2()console.log(’f1’)}async function f2(){console.log(’f2’)}console.log(’正常1’)f1()setTimeout(()=>{console.log(’定時器’)})console.log(’正常2’)

執行順序

首先我們進行正常的同步流程，打印出‘正常1’，接下來執行f1()函數，await后面的函數f2()會立即執行，所以會打印’f2’,繼續執行同步代碼打印‘正常2’，至此同步任務全部結束，開始執行異步任務微任務，await f2()等待f2()方法執行完之后打印出f1，最后執行宏任務setTimeout打印‘定時器’

這就是為什么‘正常1’,正常2’會打印在‘f1’之前，因為所有微任務執行的時候，當前執行棧的代碼必須已經執行完畢。‘f2’,’f1’會打印在‘定時器’之前是因為所有微任務總會在下一個宏任務之前全部執行完畢

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。