JS浏览器事件循环机制

JS浏览器事件循环机制

//主线程直接执行
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");
  });
});
//微事件1
process.nextTick(function () {
  console.log("6");
});
//主线程直接执行
new Promise(function (resolve) {
  console.log("7");
  resolve();
}).then(function () {
  //微事件2cls
  console.log("8");
}).then(function () {
  //微事件2cls
  console.log("8.1");
}).then(function () {
  //微事件2cls
  console.log("8.2");
});
//丢到宏事件队列中
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、8.1、8.2、2、4、3、5、9、11、10、12

console.log("script start");

async function async1() {
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2 end");
}
async1();

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

new Promise((resolve) => {
  console.log("Promise");
  resolve();
})
  .then(function () {
    console.log("promise1");
  })
  .then(function () {
    console.log("promise2");
  });

console.log("script end");

// script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout