事件循环机制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