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事件的實...