Browser node event loop

javascript In the browser JavaScript Threads

1、 Browser's event loop

2、 Macro task and micro task

1、 Timer 、ajax、DOM Waiting for the callback will be added to the macro task
2、queueMicrotask、Promise then When you join the micro task
notes ： Before executing any macro tasks , We need to ensure that the micro task queue has been emptied .

3、Promise Interview questions

3.1

setTimeout(function () {
    
  console.log("setTimeout1");
  //  Constructor code will not be added to the task queue , Will be put into main script, Will be executed directly 
  new Promise(function (resolve) {
    
    resolve();
  }).then(function () {
    
    new Promise(function (resolve) {
    
      resolve();
    }).then(function () {
    
      console.log("then4");
    });
    console.log("then2");
  });
});

new Promise(function (resolve) {
    
  console.log("promise1");
  resolve();
}).then(function () {
    
  console.log("then1");
});

setTimeout(function () {
    
  console.log("setTimeout2");
});
console.log(2);

queueMicrotask(() => {
    
  console.log("queueMicrotask");
});

new Promise(function (resolve) {
    
  resolve();
}).then(function () {
    
  console.log("then3");
});
// Output ：
promise1
2
then1
queueMicrotask
then3
setTimeout1
then2
then4
setTimeout2

3.2

async function bar() {
    
  console.log("2222222");
  return new Promise((resolve) => {
    
    resolve();
  });
}

async function foo() {
    
  console.log("1111111");
  await bar();
  // 3333 The execution of the must wait until bar() Called resovle Will execute .
  //  Because it's changed resolve, So you can 3333 It's being put in then() Inside the , Be put into micro tasks 
  console.log("3333333");
}

foo();
console.log("4444444");

//  Output ：
// 1111111
// 2222222
// 4444444
// 3333333

3.3

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

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

console.log("script start");

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

async1();

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

console.log("script end ");
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout

4、Node The event loop