事件循环

1. 核心概念

• 宏任务：包括整体代码script，setTimeout，setInterval、setImmediate
• 微任务：原生Promise.then()(有些实现的promise将then方法放到了宏任务中)、process.nextTick、Object.observe(已废弃)、 MutationObserver

2. 图解

3. 上代码

示例一：

setTimeout(() => {
  console.log('1')
}, 0)
let p = new Promise((resolve, reject) => {
  console.log('2')
  resolve()
})
p.then(() => {
  console.log('3')
})
// 输出：2, 3, 1

示例二：

Promise.resolve().then(() => {
  console.log('1')
  setTimeout(() => {
    console.log('2')
  }, 0)
})

setTimeout(() => {
  console.log('3')
  Promise.resolve().then(() => {
    console.log('4')
  })
}, 0)
// 输出：1, 3, 4, 2

示例三：

Promise.resolve().then(() => {
  console.log('1')
  setTimeout(() => {
    console.log('2')
  }, 0)
})

Promise.resolve().then(() => {
  console.log('3')
  setTimeout(() => {
    console.log('4')
  }, 0)
})
// 输出：1, 3, 2, 4

示例四：

console.log('1');
setTimeout(function () {
  console.log('2');
  process.nextTick(function () {
    console.log('3');
  })
  new Promise(function (resolve) {
    console.log('4');
    resolve();
  }).then(function () {
    console.log('5')
  })
})
process.nextTick(function () {
  console.log('6');
})
new Promise(function (resolve) {
  console.log('7');
  resolve();
}).then(function () {
  console.log('8')
})

setTimeout(function () {
  console.log('9');
  process.nextTick(function () {
    console.log('10');
  })
  new Promise(function (resolve) {
    console.log('11');
    resolve();
  }).then(function () {
    console.log('12')
  })
})
// 输出：1,7,6,8, 2,4,3,5, 9,11,10,12