js中的event-loop；事件循环机制--代码运行顺序。即setTimeout和Promise事件执行顺序

这篇博文来聊聊js中的时间循环机制，也就是代码的运行顺序。

js的语言特点

单线程 解释性语言！

event-loop

这就是重点，也就是js中的代码的执行顺序=>事件循环机制的运作原理，主要分为三大部分：

• 调用栈
• 微任务队列
• 消息队列

调用栈

event-loop开始的时候，会从全局一行一行的执行，遇到函数调用，会压到调用栈中，被压入的函数称之为帧，当函数返回后会从调用栈中弹出。

消息队列

js中的一些异步操作，比如fetch，setTimeout，setInterval,在被压入到栈中的时候里面的消息会进入到消息队列中去，消息队列中会等到调用栈清空之后再执行（也就是调用栈中的函数全执行完了后再执行）。

微任务队列

promise ，async，await等异步操作，在操作的时候会加入到微任务中去，也会在栈清空的时候立即执行，但是！！！=>调用栈中加入的微任务会立马执行，不需等待栈清空。

问题来了：如果同时存在微任务和消息队列，那么等栈结束的时候，微任务和消息队列事件谁先执行？

其机制是微任务队列会在消息队列前执行。微任务队列的优先级比消息队列高

总结下：

js在运行代码的时候，遇到函数调用，会依次放在栈中，遇到setTimeout等异步操作，会放在消息队列中。遇到promise等事件，调用栈中的微任务会立即执行，否则就放到微任务队列中。js的事件机制全部处理完毕：栈中函数执行->全部执行完毕后->微任务执行->消息队列执行！

看下列子：

1. 存在消息队列的情况下，代码执行顺序
   
   2.微任务的情况（调用栈中存在的微任务）同时存在消息队列
   
   看上方的运行顺序会发现，var p=Promise(xxxx)这就是调用栈中的微任务事件，会立即执行。而函数内部的p.then会被放到微任务队列中
   附代码：

    var 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(res=>{
            console.log(res);
        })
    }
    func2();