Execution sequence between setTimeout, console.log and promise.then

1. Execution sequence between setTimeout and console.log, promise.then, await

(1) When setTimeout delay is 0:

 setTimeout(function(){
        console.log(2);
    },0);
    console.log(1);
    //Output sequence: 1, 2

(2) Sequence: function call stack > setTimeout operation

The operations defined by setTimeout will be executed in the same queue in turn. The execution time of this queue needs to wait until the function call stack is executed, that is to say, wait for all executable codes to be executed, and then it's setTimeout's turn to execute its internal operation, and execute the code according to its delay time sequence!

    setTimeout(function(){          //Output in sequence: undefined 4 3 1 5 2
        console.log(a);             //Fourth: 1     
    },0);
    var a = 1;
    console.log(b);                 //First: undefined
    var b = 2;
    var c = 3;
    var d = 4;
    var e = 5;
    function fx(c){
        console.log(c);            //Third: 3
    }
    function fn(e,d){
        console.log(d);            //Second: 4
        setTimeout(function(){
            console.log(e);        //Fifth: 5
        },10);
    }
    setTimeout(function(){
        console.log(b);            //Sixth: 2
    },20);
    fn(e,d);
    fx(c);

(3)On the execution order of setTimeout and Promise (refer to blog: http://www.cnblogs.com/sunmarvell/p/9564815.html)

Execution order: Promise - > next. then() - > setTimeout (asynchronous)

console.log('Printing'+1);                         //First: print 1
setTimeout(function(){                      
    console.log('Printing'+2);                     //Sixth: print 2 
})
new Promise(function(resolve,reject){
        console.log('Printing'+3);                //Second: print 3
      }).then(                    
  console.log('Printing'+4));                     //Third: print 4                        
console.log('Printing'+10);                       //Fourth: print 10
new Promise(function(resolve,reject){
      setTimeout(function () {
        console.log('Printing'+5);                //Seventh: Print 5
      });
  }).then(
  console.log('Printing'+6));                    //Fifth: print 6
setTimeout(function(){
    new Promise(function(resolve,reject){
        console.log('Printing'+7);                //Seventh: print 7
      });
})

If the content of the map is expressed in words:

  • Synchronous and asynchronous tasks enter different execution "places", synchronous tasks enter the main thread, asynchronous tasks enter the Event Table and register functions.
  • When the specified task is completed, the Event Table moves this function into the Event Queue.
  • If the task in the main thread is empty after execution, it will go to the Event Queue to read the corresponding function and enter the main thread for execution.
  • The above process will be repeated, which is often called event loop.

 

Posted by maest on Mon, 30 Dec 2019 10:47:14 -0800