JavaScript中的事件循环机制

我们知道JavaScript语言是单线程的，至于为啥是单线程？

假设有两个线程，一个在页面上新增一个div，另一个线程在页面上删除div，那最终听谁的？
那JavaScript怎么实现异步的呢？
在JavaScript中，有两类任务：同步任务和异步任务。
同步任务：普通的任务，依次从上往下执行。
异步任务：又分为宏任务、微任务。

宏任务：setTimeout跟setInterval
微任务：Promise().then() 这里要注意一下，Promise方法里面的是同步任务，then里面的才是微任务
执行顺序：先执行同步任务，遇到异步任务，将其放入到宏任务或者微任务队列中，然后优先执行微任务，接下来再去执行宏任务。

例1

console.log(1);

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

setTimeout(function () {
  console.log(3);

  setTimeout(function () {
    console.log(4);
  }, 0);
}, 0);

new Promise(function (resolve, reject) {
  console.log(5);
  resolve();
}).then((res) => {
  console.log(6);
  new Promise(function (resolve, reject) {
    console.log(7);
    resolve();
  }).then((res) => {
    console.log(8);
  });
});

new Promise(function (resolve, reject) {
  console.log(9);
  resolve();
})
  .then((res) => {
    console.log(10);
  })
  .then((res) => {
    console.log(11);
  });

console.log(12);

// 输出 1  5   9   12
//      6  7  10   8   11
//      2  3  4

//解析：原理跟上面一样，不过需要注意的是，8跟11的顺序：，在这里then的层级，将各个Promise里面第一层的then放在一起，第二层的then放在一起，依此类推，
//然后依次执行第一层的，执行完第一层，接下来执行完第二层，依此类推。
//第一层（6，7，10）
//第二层（8，11）
//所以先输出8， 再输出11的。

例2

console.log(1);
async function fn() {
  console.log(2);
  await console.log(3);
  console.log(4); // 这一步，你应该会有问题
}
setTimeout(() => {
  console.log(5);
}, 0);
fn();
new Promise((resolve) => {
  console.log(6);
  resolve();
}).then(() => {
  console.log(7);
});
console.log(8);
// 输出：1  2  3   6   8   4  7  5
//解析：async await是Promise的语法糖，只是针对写法上的优化


//下面将async await翻译成Promise：
async function fn() {
  console.log(2);
  await console.log(3);
  console.log(4); // 这一步，你应该会有问题
}
// 等价于
function fn() {
  return new Promise((resolve, reject) => {
    console.log(2);
    resolve(
      (() => {
        console.log(3);
      })() // 立即执行函数
    );
  }).then(() => {
    console.log(4);
  });
}