JavaScript 事件循環(huán)

kbyyd24 發(fā)布于2019-08-22 16:36 / 1054人閱讀

摘要：總而言之，檢查調(diào)用棧是否為空，以及確定把哪個(gè)異步任務(wù)加入調(diào)用棧的這個(gè)過(guò)程就是事件循環(huán)，而實(shí)現(xiàn)異步的核心就是事件循環(huán)。

js是一門單線程的語(yǔ)言，不可能進(jìn)行多線程編程，異步編程就是多線程編程一種模式，但是我們經(jīng)常講到j(luò)s的異步編程，其實(shí)是偽異步，因?yàn)樗菃尉€程的，也就是同步，只有前面的代碼執(zhí)行完才能執(zhí)行下面的代碼。所以要理解js中的異步理念，就需要了解js的運(yùn)行核心--事件循環(huán)(Event loop)

為什么js會(huì)有異步呢

setTimeout(function(){
    //5秒之后執(zhí)行程序
    
},5000)

我們想象一下，在同步的執(zhí)行上面的代碼，需要等待5秒才能執(zhí)行定時(shí)器中的程序，然后在往下執(zhí)行，在這5秒的過(guò)程中，瀏覽器沒(méi)有任何反應(yīng)，出現(xiàn)了阻塞，在用戶體驗(yàn)上很不好。所以異步的模式就出現(xiàn)，為了解決瀏覽器非阻塞的運(yùn)行。

單線程如何做到異步

js的任務(wù)分為同步和異步兩種，它們的處理方式也不同，同步任務(wù)是直接在主線程上排隊(duì)執(zhí)行，異步任務(wù)則會(huì)被放到事件隊(duì)列中，若有多個(gè)異步任務(wù)則要在事件隊(duì)列中排隊(duì)等待，事件隊(duì)列類似一個(gè)緩沖區(qū)，任務(wù)下一步會(huì)被移到調(diào)用棧,然后主線程執(zhí)行調(diào)用棧的任務(wù)。

單線程是指js引擎中負(fù)責(zé)解析執(zhí)行js代碼的線程只有一個(gè)主線程，即每次只能做一件事，而我們知道一個(gè)ajax請(qǐng)求，主線程在等待它響應(yīng)的同時(shí)是會(huì)去做其它事的，瀏覽器先在事件表注冊(cè)ajax的回調(diào)函數(shù)，響應(yīng)回來(lái)后回調(diào)函數(shù)被添加到任務(wù)隊(duì)列中等待執(zhí)行，不會(huì)造成線程阻塞，所以說(shuō)js處理ajax請(qǐng)求的方式是異步的。

總而言之，檢查調(diào)用棧是否為空，以及確定把哪個(gè)異步任務(wù)加入調(diào)用棧的這個(gè)過(guò)程就是事件循環(huán)，而js實(shí)現(xiàn)異步的核心就是事件循環(huán)。

一次事件循環(huán)的步驟包括：

主線程在執(zhí)行代碼的時(shí)候，遇到異步任務(wù)會(huì)將它添加到一個(gè)事件隊(duì)列中(可以理解為一個(gè)數(shù)組)，然后繼續(xù)執(zhí)行下面的代碼，直到同步代碼執(zhí)行完，然后執(zhí)行步驟2

檢查事件隊(duì)列是否為空，非空?qǐng)?zhí)行步驟3，為空則繼續(xù)執(zhí)行步驟2

取出事件隊(duì)列中的第一個(gè)放到調(diào)用棧，然后主線程執(zhí)行調(diào)用棧的任務(wù)，再執(zhí)行步驟4

執(zhí)行視圖更新，然后回到步驟2

這就是事件循環(huán)

先看一段代碼，理解一下：(面試題哦)

console.log("start")

setTimeout(function() {
  console.log("setTimeout")
}, 0)

Promise.resolve().then(function() {
  console.log("promise1")
}).then(function() {
  console.log("promise2")
})

console.log("end")

打印臺(tái)輸出的log順序是什么？結(jié)合上面的步驟分析一下

最后的結(jié)果是：