浅谈JavaScript 的事件循环

先看第一个例子

console.log('script start');

setTimeout(function() {
  console.log('timeout1');
}, 10);

new Promise(resolve => {
    console.log('promise1');
    resolve();
    setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
    console.log('then1')
})

console.log('script end');
复制代码

事件分为宏观事件（macrotask）和微观事件（job或者microtask）

异步也按此分为两种

macrotask：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、setImmediate(Node.js 环境)

microtask：Promise、MutaionObserver、process.nextTick(Node.js 环境)

以上整段代码，先打入macrotask，以次执行。

1. 先输出'script start'
2. 执行到setTimeout，向macrotask推入异步事件timeout1（等microtask执行完毕后，再执行此段代码）。 继续执行到promise
3. 执行Promise构造函数，输出'promise1'
4. 向microtask推入异步事件'then1'
5. 向macrotask推入异步事件timeout2
6. 输出'script end'
7. 执行microtask中的异步事件，输出then1
8. 执行macrotask中的异步事件，先进先出，输出timeout1再输出timeout2

简单来说整个过程

1. 执行macrotask中的任务
2. 执行Microtasks中的任务
3. 重复执行上述步骤

第二个例子

new Promise(resolve => {
    resolve(1);
    Promise.resolve().then(() => console.log(2));
    console.log(4)
}).then(t => console.log(t));
console.log(3);
复制代码

1. 执行构造函数，向microtask推入事件1
2. Promise.resolve().then(() => console.log(2)); 向本次队列的末尾添加事件2
3. 执行macrotask中的事件输出4
4. 执行macrotask中的事件输出3
5. 执行macrotask中的事件输出2
6. 执行microtask中的异步输出1

注：Promise.resolve 方法允许调用时不带参数，直接返回一个resolved 状态的 Promise 对象。立即 resolved 的 Promise 对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。

在谈谈vue的nextTick()

vue之nextTick全面解析