JS 事件迴圈機制(Event Loop)

2021-10-23 13:39:40 字數 3384 閱讀 9914

js事件迴圈機制,最常用到的地方應該是做面試題,經常給出一段**,讓你寫出console.log()順序,很傷腦經,死記題目過不久又忘了。了解js事件迴圈機制之後,可以很輕鬆的解決這類題目。

js是單執行緒模式,但是又經常聽到「非同步」、「多執行緒」的概念,js中的「非同步」、「多執行緒」由事件迴圈機制現的

事件迴圈機制由三部分構成:

呼叫棧(call stack)

訊息佇列(message queue)

微任務佇列(microtask queue)

棧:先進後出;佇列:先進先出

簡單來說,js先執行呼叫棧中的**(執行完後彈出),當呼叫棧變成空,看看微任務佇列中有沒有**,有的話就調入呼叫棧中執行,當微任務隊列為空時,再看看訊息佇列有沒有**,有的話也調入呼叫棧中執行。如果微任務佇列沒有**,那就直接看訊息佇列的。

分析例項**:

function func1() 

function func2()

func2(); // 2 1 3

/*「呼叫棧」

壓入 func2()

壓入 console.log(2)

執行 console.log(2) [2]

彈出 console.log(2)

壓入 func1()

壓入 console.log(1)

執行 console.log(1) [1]

彈出 console.log(1)

彈出 func1()

壓入 console.log(3)

執行 console.log(3) [3]

彈出 console.log(3)

彈出 func2()

*/

function func1() 

function func2() , 0);

func1();

console.log(3);

}func2(); // 1 3 0

/*「呼叫棧」

壓入 func2()

壓入 settimeout(() => , 0);

執行 settimeout(() => , 0); 「訊息佇列」 壓入 console.log(0)

彈出 settimeout(() => , 0);

壓入 func1()

執行 func1()

壓入 console.log(1)

執行 console.log(1) [1]

彈出 console.log(1)

壓入 console.log(3)

執行 console.log(3) [3]

彈出 console.log(3)

彈出 func2() 此時,「呼叫棧」為空,「訊息佇列」 console.log(0)

壓入 console.log(0)

執行 console.log(0) [0]

彈出 console.log(0)

*/

var p = new promise(resolve => )

function func1()

function func2() )

func1();

console.log(3);

p.then(resolve => )

.then(() => )

}func2(); // 4 1 3 5 6 2

/*「呼叫棧」

壓入 new promise(resolve => )

執行 new promise(resolve => )

壓入 console.log(4)

執行 console.log(4) [4]

彈出 console.log(4)

壓入 resolve(5);

執行 resolve(5);

彈出 resolve(5);

壓入 func2()

壓入 settimeout(() => )

執行 settimeout(() => ) 「訊息佇列」 壓入 console.log(2);

彈出 settimeout(() => )

壓入 func1();

執行 func1();

壓入 console.log(1)

執行 console.log(1) [1]

彈出 console.log(1)

彈出 func1();

壓入 console.log(3)

執行 console.log(3) [3]

彈出 console.log(3)

壓入 p.then(resolve => )

執行 p.then(resolve => ) 「微任務佇列」 壓入 console.log(resolve);

彈出 p.then(resolve => )

壓入 .then(() => )

執行 .then(() => ) 「微任務佇列」 壓入 console.log(6);

彈出 .then(() => )

彈出 func2() 呼叫棧為空,此時「微任務佇列」:console.log(resolve); console.log(6);

壓入 console.log(resolve);

執行 console.log(resolve); [5]

彈出 console.log(resolve);

壓入 console.log(6);

執行 console.log(6); [6]

彈出 console.log(6); 呼叫棧為空,「微任務佇列」為空,「訊息佇列」:console.log(2);

壓入 console.log(2);

執行 console.log(2); [2]

彈出 console.log(2);

*/

async function func1() )

settimeout(() => )

}).then((res) => )

console.log('3');

}func1(); // 3 1 0 2

/*呼叫棧 [3]

訊息 [0, 2]

微任務 [1]

*/

js事件迴圈機制

1 所有同步任務都在主線程上執行,形成乙個執行棧 execution context stack 2 主線程之外,還存在乙個 任務佇列 task queue 只要非同步任務有了執行結果,就在 任務佇列 之中放置乙個事件。3 一旦 執行棧 中的所有同步任務執行完畢,系統就會讀取 任務佇列 看看裡面有哪...

《理解JS 事件迴圈機制》

從面試題了解事件迴圈機制 第一道 請寫出輸出內容 async function async1 async function async2 console.log script start settimeout function 0 async1 new promise function resolv...

js 事件迴圈機制 EventLoop

js 的非阻塞i o 就是由事件迴圈機制實現的 眾所周知 js是單執行緒的 也就是上乙個任務完成後才能開始新的任務 那js碰到ajxa和定時器 promise這些非同步任務怎麼辦那?這時候就出現了事件佇列。js的主要執行棧 稱為主棧 用ajax舉例 執行的時候如果遇到ajax怎麼辦,ajax事件的實...