Understanding of event queue, micro task and macro task and interview questions

An event queue is a data structure , Can store tasks to be performed . It matches the queue " fifo " Characteristics .

Not only one queue is maintained in the event loop , In fact, there are two queues ：

• Macro task queue (macrotask queue): ajax、setTimeout、setInterval、DOM monitor 、UI Rendering etc.
• Micro task queue (microtask queue): Promise Of then Callback 、Mutation Observer API、queueMicrotask()

What is the priority of the event loop for the two queues ？

1.main script The code in takes precedence ;

2. stay Before executing any macro task （ It's not a queue , It's a macro task ）, First of all View micro task queue Is there a task to perform

         That is, before the macro task is executed , You must ensure that the macro task queue is empty ;

         If it's not empty , Then priority is given to the tasks in the micro task queue （ Callback ）;

Promise Interview question one

      setTimeout(function(){
        console.log("setTimeout1");

        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");
      })

promise async await Interview question two

      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) {
        console.log("promise");
        resolve()
      }).then(function(){
        console.log("promise2");
      })

      console.log("script end");