(转载)JS中的事件循环♻️

转载于YIong https://www.cnblogs.com/alex-415/p/10557452.html

什么是事件循环

针对JS代码执行的单线程特点, 为了解决异步执行问题, 有必要在同步代码执行完毕之后, 对异步代码返回结果进行处理. 这时候的处理方式, 处理顺序就是一个核心问题. 所以才有了事件循环执行机制, 简要介绍如下:

1. 所有同步任务都在主线程上的栈中执行。

2. 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

3. 一旦"栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，选择出需要首先执行的任务（由浏览器决定，并不按序）。

异步任务

1.MacroTask（宏观Task） setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering

2.MicroTask（微观任务） process.nextTick, Promise, Object.observe, MutationObserver

规范：

每个浏览器环境，至多有一个event loop。
一个event loop可以有1个或多个MacroTask queue，而仅有一个 MicroTask Queue。
一个task queue是一列有序的task, 每个task定义时都有一个task source，从同一个task source来的task必须放到同一个task queue，从不同源来的则被添加到不同队列。
tasks are scheduled，所以浏览器可以从内部到JS/DOM，保证动作按序发生。
Microtasks are scheduled，Microtask queue 在当前 task queue 的结尾执行。microtask中添加的microtask也被添加到Microtask queue的末尾并处理。

注： event loop的每个turn，是由浏览器决定先执行哪个task queue。这允许浏览器为不同的task source设置不同的优先级，比如为用户交互设置更高优先级来使用户感觉流畅。

实例

function ELoop() { // 当前任务 let p = new Promise((resolve, reject) => { console.log("current Task") resolve(); }); let nextP;

    setTimeout(() => {
        console.log("MacroTask_1");
        nextP.then(() => {
            // 第一次执行时，这段代码并没有执行到。
            console.log("MicroTask_promise_1"); //第一个MicroTask
        })
        console.log("MacroTask_1 end")
    }, 0) // 第一个 MacroTask

    setTimeout(() => {
        console.log("MacroTask_2");
        console.log("MacroTask_2 end")
    }, 0) // 第二个MacroTask

    nextP = p.then(() => {
        console.log("MicroTask_promise_2"); //第一个MicroTask
    }).then(() => {
        console.log("MicroTask_promise_3"); // 第二个MicroTask
    })

    console.log("current Task end")
}

ELoop();

/**输出结果：
current Task
current Task end
MicroTask_promise_2
MicroTask_promise_3
MacroTask_1
MacroTask_1 end
MicroTask_promise_1
MacroTask_2
MacroTask_2 end
**/