First of all,

1. Have a simple understanding of synchronous asynchrony, macro tasks, and micro tasks

Js is single-threaded, all tasks are carried out to each queue, like do care (js code execution), care only one master (single-threaded), customer code (js) waiting to enjoy the service, line up the order according to the types of customers (synchronous asynchronous task, macro micro tasks) and customers to shop (location) in code execution sequence

  • Synchronous and asynchronous, macro task and micro task are two different dimensions of function description respectively.

  • Asynchronous tasks: setTimeout and setInterval, Ajax, event binding, etc

  • Synchronous tasks: All tasks except asynchronous tasks

  • Microtasks: Theny statement and catch statement after process.nextTick and Promise, etc

  • Macro tasks: All tasks except microtasks

2. Execute the sequence judgment method

Synchronous before asynchronous, macro before microtask in this Promise, and other times microtask execution precedes other microtasks (see the Promise microtask macro task article)

Look at the following example

3. Simple example analysis

New Promise(function (resolve, reject) {console.log(' async macro Promise '); resolve(); }). Then (function () {console.log(' console.log ')}) console.log(' console.log '); }, 0) new Promise(function (resolve, reject) {console.log(' sync macro Promise '); resolve(); }). Then (function () {console.log(' console.log ')}) console.log(' console.log ')Copy the code

SetTimeout is an asynchronous task. Although it is executed after 0 seconds, it is still at the back of the queue, so all the code in it is executed later. New Promise is both the synchronization task and the primary task, so the first line prints’ sync macro Promise ‘, then the micro task executes later, line 16 executes first, then line 13 executes then, so the second line prints’ sync macro task ‘, The third behavior ‘synchronous microtask then’; The statement in setTimeout is executed next, and then is executed after line 8 because it is a microtask.

4. A slightly more complicated case study

SetTimeout (() => {console.log(' async 1 task time1'); New Promise(function (resolve, reject) {console.log(' async 1 macro Promise '); SetTimeout (() => {console.log(' async 1 task time2'); }, 0); resolve(); {}). Then (function () the console. The log (' asynchronous 1 micro task then ')})}, 0). Console. log(' main macro task '); SetTimeout (() => {console.log(' async 2 task time2'); }, 0); New Promise(function (resolve, reject) {console.log(' macro Promise '); // reject(); resolve(); }). Then (function () {console.log(' console.log ')}). Catch (function () {console.log(' console.log ')}) console.log(' console.log ');Copy the code

In this example, notice that the THEN in line 9 is executed before setTimeout in line 14, and setTimeout in line 5 after line 14. That is, in an asynchronous task code block, all synchronous statements (including macro and micro tasks) will be executed first, and then asynchronous tasks of the same level in the whole code will be executed. SetTimeout in line 5 is the second asynchronous statement, and will be executed later.