js asynchronous execution order

Reference article: js asynchronous execution order
 
1. The execution order of JS is synchronous first and then asynchronous
2. Execution sequence of task queue in asynchronous: Micro task queue and macro task queue
3. Call resolve in Promise. reject belongs to the micro task queue and setTimeout belongs to the macro task queue
Note that the above are all queues, first in, first out.
 
Micro tasks include` process.nextTick ` ,`promise` ,`MutationObserver`.
Macro tasks include 'script', 'setTimeout', 'setInterval', 'setImmediate', 'I/O', 'UI rendering'.
 
Title 1:
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')

Execution results?

analysis:

Execute synchronization code first:

1. First console.log('script start')
2. When async1() is executed, the async2 function is executed immediately: console.log('async2 end')
3. Execute the synchronization function in new Promise() in sequence: console.log('Promise')
4. Final execution console.log('script end').
The above is the code of synchronous execution, and then look at the remaining code of asynchronous execution:
First of all, setTimeout is a macro task. Until the end, there are micro tasks left:
async function async1() {
  await async2()
  console.log('async1 end') 
}
new Promise(resolve => {
  resolve()
})
.then(function() {
  console.log('promise1') 
})
.then(function() {
  console.log('promise2') 
})

5. Then, according to the first in, first out alignment, execute the function blocked after await async2() console.log('async1 end') 

6. Execute the resolve function of promise

new Promise(resolve => {
  resolve()
})

The next two then: console.log('promise1') ----   console.log('promise2') ;

7. The last executed function is setTimeout console.log('setTimeout') ;

To sum up, the above codes are executed in the following order:

1.script start 2.async2 end 3.Promise 4.script end 5.async1 end 6.promise1 7.promise2 8.setTimeout

 

Topic 2:

(function() {

    setTimeout(() => {
        console.log(0);
    });

    new Promise(resolve => {
        console.log(1);

        setTimeout(() => {
            resolve();
            Promise.resolve().then(() => console.log(2));
            console.log(3);
        });

        Promise.resolve().then(() => console.log(4));

    }).then(() => {
        console.log(5);
        Promise.resolve().then(() => console.log(8)); 
        setTimeout(() => console.log(6));
    });

    console.log(7);

})();

1. Execute synchronization code first, and remove setTimeout first:

new Promise(resolve => {
      console.log(1);
      Promise.resolve().then(() => console.log(4)); //Micro task
  }).then(() => {                  //The then function is executed when the corresponding resolve is executed
      console.log(5);
      Promise.resolve().then(() => console.log(8));//Micro task
}); console.log(7);

As you can see, execute first: console.log(1);console.log(7);

2. Perform micro tasks Promise.resolve ().then(() => console.log (4)); 

The code becomes:

(function() {
  setTimeout(() => {
      console.log(0);
  });
  new Promise(resolve => {
      setTimeout(() => {
          resolve();
          Promise.resolve().then(() => console.log(2));
          console.log(3);
      });
  }).then(() => {
      console.log(5);
      Promise.resolve().then(() => console.log(8)); //This sentence is extra
      setTimeout(() => console.log(6));
  });
})();

Only macro tasks are left (micro tasks are in macro tasks, that is, there are no micro tasks outside macro tasks)

3. Execution console.log(0);

4. Execute setTimeout in new Promise and the synchronization function in it first: console.log(3)

5. Execute the above resolve, which corresponds to the following then function:

then(() => {
      console.log(5);
      Promise.resolve().then(() => console.log(8)); //This sentence is extra
      setTimeout(() => console.log(6));
 }

So first console.log(5);

The rest are micro tasks and macro tasks. First, look at micro tasks:

new Promise(resolve => {
      resolve();
      Promise.resolve().then(() => console.log(2));
  }).then(() => {
      Promise.resolve().then(() => console.log(8));
      setTimeout(() => console.log(6));
  });

Therefore, the micro tasks in the queue are executed first: console.log(2) , in the execution of the console.log(8);

Last but not least console.log(6)

In conclusion, the result is

1/7/4/0/3/5/2/8/6
 
Detailed question 3:
(function() {
    setTimeout(() => {
        console.log(0);
    });

    new Promise(resolve => {

        console.log(1);
        
        setTimeout(() => {
            resolve();
            Promise.resolve().then(() => {
                console.log(2);
                setTimeout(() => console.log(3));
                Promise.resolve().then(() => console.log(4));
            });
        });

        Promise.resolve().then(() => console.log(5));

    }).then(() => {

        console.log(6);
        Promise.resolve().then(() => console.log(7));
        setTimeout(() => console.log(8));

    });

    console.log(9);
})();
The explanation is as follows: [synchronous > asynchronous; micro task > macro task]
Step 1: print out 1. 9. As shown in the figure

Figure a

According to the task queue in Figure a:
Step 2: execute micro task 3, print out 5;
Step 3: execute macro task 1, print out 0,
Step 4: start macro task 2, as shown:


Figure b

Step 5: according to the task queue in Figure b, execute micro task 4 and print out 6, as shown in the figure:

Figure c

Step 6: according to the task queue in Figure c, execute micro task 5 and print out 2, as shown in Figure c

Figure d

From the task queue in Figure d,
Step 7: execute micro task 6, print out 7;
Step 8: execute micro task 9, print out 4;
Step 9: execute macro task 7 and print out 8;
Step 10: execute macro task 8 and print out 3;



The answer is:

1-9-5-0-6-2-7-4-8-3

 

 

Tags: REST

Posted on Wed, 24 Jun 2020 23:55:28 -0400 by rocram16