首先看一段代碼

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，定時器

為什么會出現(xiàn)這樣打印順序呢

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

概念

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

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

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

鼠標點擊會觸發(fā)一個事件回調(diào)，需要執(zhí)行一個宏任務，然后解析HTMl

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

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

async function (){
		await f2()
		console.log('f1')
	}

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

執(zhí)行順序

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論