JavaScript Event Loop事件循环机制理解

JavaScript Event Loop

JavaScript是一门单线程的语言，它的异步和多线程的实现是通过event loop事件循环机制来实现的大体有三个部分组成，调用栈（call stack）、消息队列（Message Queue）、微任务队列（Microtask Queue）

优先级是调用栈>微任务>消息队列

①全是同步方法

function func1(){
    cosole.log(1);
}
function func2(){
    console.log(2);
    func1();
    console.log(3);
}
func2();

上面代码的事件循环是（以下"压入栈"用"入"代替，"弹出栈’'用"出"代替）：func2()入，console.log(2)入，console.log(2)出，func1()入，cosole.log(1)入，cosole.log(1)出，func1()出，console.log(3)入，console.log(3)出，func2()出。

②加入异步操作，如：setTimeout()，setInterval()等

它们中的回调函数会入队到消息队列中，称为"消息"，消息会在调用栈清空时执行。

function func1(){
    cosole.log(1);
}
function func2(){
    setTimeout(()=>{
        console.log(2);
    },0);
    func1();
    console.log(3);
}
func2();

上面代码的事件循环是：func2()入， setTimeout(()=>{console.log(2);},0)入，console.log(2)进入消息队列（回调函数进入消息队列），setTimeout(()=>{},0)出， func1()入， cosole.log(1)入， cosole.log(1)出， func1()出，console.log(3)入，console.log(3)出，func2()出，console.log(2)入，console.log(2)出。

③使用Promise、async/await创建的异步操作会加入到微任务队列中。

当调用栈清空的时候就会立即执行，优先级高于"消息"

var p=new Promise(resolve=>{
    console.log(4);
    resolve(5);
});
function func1(){
    cosole.log(1);
}
function func2(){
    setTimeout(()=>{
        console.log(2);
    },0);
    func1();
    console.log(3);
    p.then(resolved=>{
       console.log(resolved) 
    }).then(()=>{
        console.log(6)
    });
}
func2();

上面代码的事件循环是:new Promise()首先被压入调用栈，console.log(4)入，console.log(4)出，resolve(5)入，resolve(5)出，func2()入， setTimeout(()=>{console.log(2);},0)入，console.log(2)进入消息队列（回调函数进入消息队列），setTimeout(()=>{},0)出， func1()入， cosole.log(1)入， cosole.log(1)出， func1()出，console.log(3)入，console.log(3)出，p.then(resolved=>{
console.log(resolved)})和then(()=>{console.log(6)})两个回调函数会入队到微任务队列中，func2()出，一旦调用栈清空就执行微任务队列中的事件，console.log(resolved)入，console.log(resolved)出，console.log(6)入，console.log(6)出，再执行消息队列中的消息console.log(2)入，console.log(2)出