关于javascript:从Promise和SetTimeout执行顺序中了解JS的事件轮询

setTimeout(function() {console.log('setTimeout');
})
new Promise(function(resolve) {console.log('promise');
}).then(function() {console.log('then');
})
console.log('console');

整段代码做为宏工作，进入主线程
遇到setTimeout，将其回调函数注册后散发到宏工作事件队列中（作为下一次循环宏工作调用）
接下来遇到了 Promise，new Promise 立刻执行，打印 ’promise’，then函数散发到微工作事件队列（本次宏工作的微工作）
遇到console.log()，立刻执行
整体代码作为第一次循环的宏工作执行完结，查看还有微工作then，执行
开始第二次循环，执行setTimeout，打印 ’promise’
后果：promise, console, then, setTimeout

console.log('Hello World!');
const p1 = new Promise((resolve) => {console.log(3);
  resolve(4);
});
const p2 = new Promise((resolve) => {console.log(1);
  setTimeout(() => {console.log(6)
  }, 0);
  resolve(2);
});
p1.then((res) => {console.log(res)
});
p2.then((res) => {console.log(res)
});
console.log(5);

整体代码作为宏工作进入主线程，先执行打印 ’hello world’
而后 p1 中打印 ’3’，resolve(4)在 then 函数中散发到微工作事件队列
而后进入 p2 中打印 ’1’，遇到setTimeout，将其回调函数注册散发到宏工作事件队列
resolve(2)在 then 函数中散发到微工作事件队列；向下执行，再打印 ’5′
第一次循环的宏工作执行完，查看微工作事件队列，先打印 ’4’，再打印 ’2′
第二次循环，执行宏工作中的setTimeout，打印 ’6′
后果：hello world，3，1，5，4，2，6

console.log('1');
setTimeout(function first () {console.log('2');
    setTimeout(function third () {new Promise(function(resolve) {console.log('3');
        resolve();}).then(function() {console.log('4')
      })
    })
})
new Promise(function(resolve) {console.log('5');
    resolve();}).then(function() {console.log('6')
})
setTimeout(function second () {console.log('7');
    new Promise(function(resolve) {console.log('8');
        resolve();}).then(function() {console.log('9')
    })
})

整体代码作为第一次宏工作，进入主线程执行，先打印 ’1’，再将 setTimeout 的回调函数 first 注册散发到宏工作事件队列
向下执行，进入 Promise 中打印 ’5’，then函数散发到微工作事件队列
再遇到一个 setTimeout，将其回调函数second 注册散发到宏工作事件队列中
第一次循环的宏工作实现，执行微工作的 then 函数，打印 ’6′
开始第二次循环，执行宏工作队列中的 first 函数打印 ’2’；而后又遇到了 setTimeout 函数，将 third 函数注册散发到宏工作事件队列中（下次循环才会调用）
接着，执行本次宏工作队列中的 second 函数打印 ’7’，进入 promise 打印 ’8’，then函数注册散发到微工作事件队列
第二次循环的宏工作实现，执行微工作的 then 函数，打印 ’9′
开始第三次循环，执行宏工作队列中 third 函数，先打印 ’3’，再执行 then 中打印 ’4′
后果：1，5，6，2，7，8，9，3，4

所有的同步工作都在主线程上执行，造成一个执行栈
主线程之外，还存在一个工作队列，只有异步工作有了运行后果，就在工作队列中搁置一个事件
一旦执行栈中所有同步工作执行结束，零碎就会读取工作队列中的事件，异步工作完结期待状态，进入执行栈，开始执行
反复上一步（事件轮循——反复读取主线程和工作队列中的事件）
在 js 中的工作做更准确的定义：
- macro-task(宏工作): 整体代码 js，setTimeout，setInterval
- micro-task(微工作): Promise.then，process.nextTick(node.js)
在本次循环执行中，先执行宏工作，再执行微工作，都实现后，开始第二轮循环，执行宏工作，执行微工作，直到没有宏工作，实现执行
图片起源

关于javascript:从Promise和SetTimeout执行顺序中了解JS的事件轮询

例子一

例子二

例子三

总结