EventLoop事件循环，宏任务、微任务及练习题

        JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。

为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类：  

同步任务（synchronous）：又叫做非耗时任务，指的是在主线程上排队执行的那些任务， 只有前一个任务执行完毕，才能执行后一个任务。

异步任务（asynchronous）：又叫做耗时任务，异步任务由JavaScript 委托给宿主环境(浏览器 nodejs)进行执行，当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数。

EventLoop执行过程：

• 同步任务由 JavaScript 主线程次序执行

• 异步任务委托给宿主环境执行

• 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行

• JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行

• JavaScript 主线程不断重复上面的第 4 步

JavaScript 主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制又称为 EventLoop（事件循环）。

JavaScript 把任务队列分为宏任务队列和微任务队列

宏任务（macrotask）：整个script标签、异步 Ajax 请求、setTimeout、setInterval、文件操作

微任务（microtask）：Promise、process.nextTick

 每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务。

console.log(1) // 宏任务1

// 只要看到了加了时间, 那么一定是等时间满足了, 才会加入到队列中
setTimeout(() => {
  console.log(2) // 宏任务2的内容
}, 1000)

setTimeout(() => {
  console.log(4) // 宏任务3的内容
}, 0)

console.log(3) // 宏任务1的内容

//代码运行结果为1 3 4 2

console.log(1)

  setTimeout(function () {
    console.log(2)
  }, 0)

  const p = new Promise((resolve, reject) => {
    resolve(1000)
  })
  p.then(data => {
    console.log(data)
  })

  console.log(3)

//代码运行结果为1 3 1000 2

 console.log(1)
  setTimeout(function () {
    console.log(2)
    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 () {
    console.log(7)
    new Promise(function (resolve) {
      console.log(8)
      resolve()
    }).then(function () {
      console.log(9)
    })
  })
  console.log(10)

//代码运行结果为1 5 10 6 2 3 4 7 8 9

console.log(1)

  setTimeout(function () {
    console.log(2)
  }, 0)

  const p = new Promise((resolve, reject) => {
    console.log(3)
    resolve(1000) // 标记为成功
    console.log(4)
  })

  p.then(data => {
    console.log(data)
  })

  console.log(5)

//代码运行结果为1 3 4 5 1000 2
// 分析：new promise()被实例化了，函数体里的代码立即执行

new Promise((resolve, reject) => {
    resolve(1)

    new Promise((resolve, reject) => {
      resolve(2)
    }).then(data => {
      console.log(data)
    })

  }).then(data => {
    console.log(data)
  })

  console.log(3)

//代码运行结果为3 2 1
// 分析：后执行的微任务会插队到任务队列的最前面执行

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

    new Promise((resolve, reject) => {
      console.log(3)
      setTimeout(() => {
        resolve('setTimeout2')
        console.log(4)
      }, 0)
      resolve('p2')
    }).then(data => {
      console.log(data)
    })

    setTimeout(() => {
      resolve('setTimeout1')
      console.log(5)
    }, 0)
  }).then(data => {
    console.log(data)
  })
  console.log(6)

//代码运行结果为2 3 6 p2 p1 1 4 5
// 分析：后执行的微任务会插队到任务队列的最前面执行
//       promise已经有了执行结果，则后面的resolve和reject都不再执行（状态凝结）