归纳JavaScript事件循环（event loop）

[GeShengming]

规范

• JavaScript 在运行时是单线程的
• JavaScript 的并发模型基于"事件循环"
• JavaScript 函数调用时形成了一个栈模型
• JavaScript 运行时维护了一个消息队列
• 消息队列中分为宏任务（macrotasks）和微任务（microtasks），每个宏任务有一个微任务队列。例子：
  • macrotasks: setTimeout, requestAnimationFrame, I/O, UI rendering
  • microtasks: process.nextTick, Promises, Object.observe

事件循环

简单来说，每一轮事件循环将会：
1.以队列的顺序执行先进入队列的宏任务
2.以队列的顺序执行完当前宏任务的所有微任务
3.以队列的顺序执行下一个宏任务

例子

执行以下代码将会输出什么？

var foo = () => (new Promise((resolve, reject) => {
    console.log(1);
    let p = new Promise((resolve, reject) => {
        console.log(2);
        setTimeout(() => {
            console.log(3);
        }, 0)
        resolve(4);
    });
    resolve(5);
    p.then((arg) => {
        console.log(arg);
    });
}));

foo().then((arg) => {
    console.log(arg);
});

console.log(6);

事件循环第一轮：立即输出1，2，6。然后在本轮的微任务队列里输出4，5。

事件循环第二轮：执行宏任务队列中setTimeout的函数体，输出3。

代码执行后依次输出1，2，6，4，5，3

参考文章

Concurrency model and Event Loop-MDN
Difference between microtask and macrotask within an event loop context

[fanlufang]

博主写的精炼，刚好最近遇到事件循环的问题，看完觉得总结的不错，哈哈