setTimeout async promise Promise summary execution order and execution order setTimeout face questions

Promise face questions and execution order setTimeout

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Promise和setTimeout执行顺序 面试题</title>
    </head>

    <body>
        <script type="text/javascript">
            setTimeout(function() {
                console.log(1)
            }, 0);
            new Promise(function(a, b) {
                console.log(2);
                for(var i = 0; i < 10; i++) {
                    i == 9 && a();
                }
                console.log(3);
            }).then(function() {
                console.log(4)
            });
            console.log(5)
        </script>
    </body>

</html>

 

 

 Most need to explain is: then and settimeout order of execution, that is setTimeout(fn, 0)an "event loop" started when the next Promise.then()execution in the current round of "event loop" end . Thus then function to output, after the output settimeout.

setTimeout async promise summary execution order

the async function Async1 () { 
the console.log (
" Async1 Start " );
// After implementation of this one, the output async2, await allow the current thread, the code to back the task queue, and then continue test () function of the synchronization code behind
the await async2 (); the console.log ( " Async1 End " ); } the async function async2 () { the console.log ( ' async2 ' ); } the console.log ( " Script Start " ); the setTimeout (function () { the console.log ( " setTimeout " ); },0); async1(); new Promise(function (resolve) { console.log("promise1"); resolve(); }).then(function () { console.log("promise2"); }); console.log('script end');

 

Well, let's answer:

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

When performing the setTimeout function, which was added callback queue (this queue and the queue is not promise the same queue, execution priority promise below). Continue

Promise to create an object code which belongs to the synchronization code, asynchronous promise and then embodied in the catch, so promise1 is outputted, then the function code is then added to the queue, the synchronization code continues, the output script end.

Thus the synchronization code is completed, the task execution start retrieved from the queue, since just mentioned, the setTimeout task queue priority lower than promise queue, it first performs the first task promise queue, then the method performs some of the output promise2, then await execution in the code behind async1 output async1 end.

The last promise queue task is finished before performing setTimeout task queue, output settimeout.

 

At this point, the output of the problem of the analysis is completed, the execution of these results can be summarized in one sentence, to perform synchronization code is encountered asynchronous code to join the queue, and then order the team to perform asynchronous code, the last execution queue setTimeout code.

Add queue task priority: promise.Trick ()> promise callback> async> setTimeout> setImmediate,

But if the latter, then await followed Promise, async1 end you need to wait three to tick to perform. So in fact, the performance is still relatively little slow, so the V8 team draws a Bug in Node 8, at the bottom of the engine three times to reduce the tick secondary tick. That v8 engine browser print out, promise2 and async1 end is the opposite.

 
----------------
Disclaimer: This article is CSDN blogger "yujin0222 'original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement. .
Original link: https: //blog.csdn.net/baidu_33295233/article/details/79335127

Guess you like

Origin www.cnblogs.com/psxiao/p/11608961.html