事件循環(huán)機(jī)制event-loop
- 事件循環(huán)機(jī)制由三部分組成：調(diào)用棧鳞尔、消息隊(duì)列和微任務(wù)隊(duì)列早直。
- event-loop開始的時(shí)候會(huì)從全局一行一行的執(zhí)行，遇到函數(shù)調(diào)用糕韧，會(huì)壓入調(diào)用棧中喻圃，被壓入的函數(shù)被稱之為幀，但函數(shù)返回后會(huì)從調(diào)用棧中彈出
- js中的異步操作级及，比如fetch、setTimeout怕吴、setInterval 壓入到調(diào)用棧中的時(shí)候里面的消息會(huì)進(jìn)入到消息隊(duì)列中去县踢，消息隊(duì)列中，會(huì)等到調(diào)用棧清空后再執(zhí)行
- promise async await的異步操作的時(shí)候會(huì)加入到微任務(wù)中去硼啤，會(huì)在調(diào)用棧清空的時(shí)候立即執(zhí)行
- 調(diào)用棧中加入的微任務(wù)會(huì)立馬執(zhí)行
實(shí)戰(zhàn)演練
1.
function fun1() {
console.log(1);
}
function fun2() {
console.log(2);
fun1()
console.log(3);
}
fun2();
//fun2進(jìn)入調(diào)用棧 //返回2
//fun1進(jìn)入調(diào)用棧 //返回1 //fun1彈出調(diào)用棧
//返回3 //fun2彈出調(diào)用棧
2.
function func1(){
console.log(1);
}
function func2(){
setTimeout( ()=>{
console.log(2);
},0)
func1();
console.log(3);
}
func2();
//func2進(jìn)入調(diào)用棧
//setTimeout進(jìn)入調(diào)用棧 console.log(2);進(jìn)入消息隊(duì)列
//func1進(jìn)入調(diào)用棧 //返回1 //func1彈出調(diào)用棧
//返回3 //func2彈出調(diào)用棧 //消息隊(duì)列執(zhí)行返回2
3.
let p = new Promise( resolve => {
console.log(4);
resolve(5);
})
function func1() {
console.log(1);
}
function func2() {
setTimeout( ()=>{
console.log(2);
},0)
func1();
console.log(3);
p.then( resolve => {
console.log(resolve);
})
}
func2();
//調(diào)用棧中加入的微任務(wù)會(huì)立即執(zhí)行 返回4
// func2進(jìn)入調(diào)用棧
// setTimeout進(jìn)入調(diào)用棧 console.log(2)進(jìn)入消息隊(duì)列
// func1進(jìn)入調(diào)用棧 返回1 func1出棧
//返回3
//p的resolve值為5 返回5 func2出棧 setTimeout出棧
//消息隊(duì)列執(zhí)行 返回2
