Understanding of the task queue, asynchronous programming

First, understand the task queue

JavaScript engine can only be performed one time a block of code, every time a piece of code is ready to execute, will be added to the task queue. After complete implementation of a code JavaScript engine, will then perform the next task in the task queue.

. 1   < Script > 
2  
. 3  
. 4          / *  
. 5          
. 6              the JavaScript engine same time a block of code can only be executed whenever a code is ready to execute, will be added to the job queue.
7              when the engine completes the execution of JavaScript code that will then perform the next task in the task queue.
. 8          
. 9           * / 
10  
. 11          function foo () {             
 12 is              the console.log ( ' foo-Start ' )       // Step 
13 is              function bar () {             
 14                  the console.log ( ' bar ' )
 15              }
 16             the console.log ( ' Test ' )           // second stage 
. 17              bar ()                         // third step, calling bar () 
18 is              the console.log ( ' foo-End ' )        // fourth step 
. 19          }
 20 is  
21 is          foo () ;
 22 is  
23 is      </ Script >

 

 

In the example in FIG. 1, when calling foo () function, function foo ()     will be sent to the job queue, after completion of the function performed  function foo ()  will be shot out from the task queue

FIG Example 2, when calling foo () function, function foo ()     into the task queue, and then go down, encountered bar ()    after the  function bar ()     after the task into the queue, the function execution is completed, the first Executive    function bar ()     then execute  function foo ()       (task queue corresponding to the queue stack)

 

 A program of study before 1.2

. 1  < body > 
2      < Script > 
. 3  
. 4          
. 5  
. 6          // asynchronous programming mode: event callback, the callback function, Promise 
. 7          
. 8          // event callback 
. 9          // const = new new XHR the XMLHttpRequest (); 
10          // xhr.onreadystatechange = function () { 
. 11          //      IF (xhr.readyState ===. 4) { 
12 is          //          // code here will be performed only after the completion of the request 
13          //      } 
14          // }; 
15  
16          // callback function 
. 17          function foo (Fun) {
 18 is             the setTimeout (() => {
 . 19                  // foo () function is called after the completion of the task bar incoming function, i.e. parameter Fun 
20 is                  the console.log ( ' foo task completion ' );
 21 is                  Fun ();
 22 is              }, 2000 )
 23 is          }
 24  
25          function bar () {
 26 is              the console.log ( ' bar task completion ' )
 27          }
 28  
29          // the function bar () as foo () function is passed the parameter 
30          foo (bar)
 31 is          
32      < / Script>
33 </body>

1.3 asynchronous programming -Promise objects

 

. 1  < body > 
2      < Script > 
. 3  
. 4          // Promise object represents an asynchronous operation, there are three states: pending (in progress), Fulfilled (has succeeded) and Rejected (failed) 
. 5  
. 6          const Promise =  new new Promise ( function ( Resolve, Reject) {
 . 7  
. 8              // tasks executed successfully, call resolve () function 
. 9  
10              @ task execution failure, Reject call () function 
. 11  
12 is              IF ( to false ) {
 13 is                  Resolve ( ' first task execution completion the results obtained after ' )
 14              }the else {
 15                  Reject ( ' Tell second reason for the failed task ' )
 16              }
 . 17  
18 is          });
 . 19  
20 is          // callback 1. while monitoring the success and failure 
21 is          promise.then ( function (value) {
 22 is              // when a task is executed successfully executes the code here, and the result obtained on a function of the incoming task 
23 is              the console.log (value)
 24          }, function (reason) {
 25              // when a task execution failure , where the code is executed, the cause for the failure of a task passed to the function 
26 is              the console.log (reason)
 27          });
 28  
29         // 2. successful callback listener only 
30          promise.then ( function (value) {
 31 is              // When a task is executed successfully executes the code here, and will be a function of the result of a task on the incoming 
32              Console .log (value)
 33 is          });
 34 is  
35          // callback fails only listen 3. 
36          promise.then ( null , function (reason) {
 37 [              // when a task execution failure, executes the code here, and passing a task failure reasons the function 
38 is              the console.log (reason)
 39          });
 40  
41 is          // 4. the catch () method corresponding to the then () method passing only the failure handler. The above code is equal to the following wording: 
42 is          Promise.catch(function (reason) {
43             console.log(reason)
44         })
45 
46     </script>
47 </body>