事件循环机制event-loop
- 事件循环机制由三部分组成：调用栈、消息队列和微任务队列。
- event-loop开始的时候会从全局一行一行的执行，遇到函数调用，会压入调用栈中，被压入的函数被称之为帧，但函数返回后会从调用栈中弹出
- js中的异步操作，比如fetch、setTimeout、setInterval 压入到调用栈中的时候里面的消息会进入到消息队列中去，消息队列中，会等到调用栈清空后再执行
- promise async await的异步操作的时候会加入到微任务中去，会在调用栈清空的时候立即执行
- 调用栈中加入的微任务会立马执行
实战演练
1.
function fun1() {
console.log(1);
}
function fun2() {
console.log(2);
fun1()
console.log(3);
}
fun2();
//fun2进入调用栈 //返回2
//fun1进入调用栈 //返回1 //fun1弹出调用栈
//返回3 //fun2弹出调用栈
2.
function func1(){
console.log(1);
}
function func2(){
setTimeout( ()=>{
console.log(2);
},0)
func1();
console.log(3);
}
func2();
//func2进入调用栈
//setTimeout进入调用栈 console.log(2);进入消息队列
//func1进入调用栈 //返回1 //func1弹出调用栈
//返回3 //func2弹出调用栈 //消息队列执行返回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();
//调用栈中加入的微任务会立即执行 返回4
// func2进入调用栈
// setTimeout进入调用栈 console.log(2)进入消息队列
// func1进入调用栈 返回1 func1出栈
//返回3
//p的resolve值为5 返回5 func2出栈 setTimeout出栈
//消息队列执行 返回2
