js之事件循环

事件循环
事件循环（Event Loop）是JavaScript运行时中用于处理异步操作的一种机制。JavaScript是单线程的语言，因此事件循环是为了协调异步操作和主线程执行任务之间的关系，保证程序的正确性和效率。事件循环的机制是基于消息队列的。当JavaScript执行异步操作时，比如发起一个网络请求或设置一个定时器，这些操作不会阻塞主线程，而是被放入消息队列中。一旦主线程的任务执行完成，事件循环就会从消息队列中取出一个任务，将其加入到主线程的任务队列中执行。

宏任物和微任务
宏任务（Macro Task）和微任务（Micro Task）都是指在JavaScript中异步任务的执行方式。

宏任务指的是那些由浏览器或者Node.js自身的事件触发器（如setTimeout、setInterval、I/O、UI交互事件等）所产生的异步任务，它们会被放入宏任务队列中等待执行。当主线程执行完所有同步任务后，会检查宏任务队列中是否有任务需要执行，如果有，则按照先进先出的顺序依次执行。

微任务指的是由Promise、MutationObserver等API产生的异步任务，它们会被放入微任务队列中等待执行。当主线程执行完所有同步任务和当前宏任务队列中的所有任务后，会检查微任务队列中是否有任务需要执行，如果有，则按照先进先出的顺序依次执行。

先执行宏任务，再执行微任务。接着执行第二个宏任务…

<script>
    setTimeout(()=> {
        console.log("1")
    })
    var pro = new Promise((resolved,rejected)=>{
        console.log("2")
        resolved("3")
    });
    console.log("4")
    pro.then((res)=>{
        console.log(res)
    })
</script>

解析：
以上题目中 script 是一个宏任务，称为宏1。setTimeout 是第二个宏任务，称为宏2。pro.then 是一个微任务，称为 微1。
先执行宏1。在 宏1 中。先执行 Promise 中的立即执行函数，执行代码 console.log("2")，打印 2。
接着执行同步任务console.log("4")，打印 4。宏1 执行完毕。
接着执行 微1，执行代码 console.log(res) ，打印 3 。
接着执行 宏2，执行代码 console.log("1") ，打印 1 。
结果：2 4 3 1

<script>
    setTimeout(()=> {
        console.log("1")
    })
    var pro = new Promise((resolved,rejected)=>{
        setTimeout(()=> {
           console.log("2");
           resolved("3")
        })
    });
    pro.then((res)=>{
        console.log(res);
        setTimeout(()=> {
           console.log("4")
        })
    })   
     setTimeout(()=> {
        console.log("5")
    })
</script>

解析：
第一个 setTimeout 记为 宏2，接下来在 Promise 中有一个 setTimeout 记为 宏3。内部的 resolved 微任务记为 微1。在 微1 内部又有一个 setTimeout 记为 宏4。最后一个 setTimeout 记为 宏5。
执行 宏2，执行代码 console.log("1") 打印 1。
执行 宏3，执行代码 console.log("2") 打印 2。
执行 宏3 中的 微1，执行代码 console.log("3") 打印 3。
执行 宏5，执行代码 console.log("5") 打印 5。
执行 微1中宏4，执行代码 console.log("4") 打印 4。
结果：1 2 3 5 4