• setTimeout async promise执行顺序总结


    Promise和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>

     最需要 解释的是:then和settimeout执行顺序,即setTimeout(fn, 0)在下一轮“事件循环”开始时执行,Promise.then()在本轮“事件循环”结束时执行。因此then 函数先输出,settimeout后输出。

    setTimeout async promise执行顺序总结

    async function async1() {
    console.log(
    "async1 start");
    //执行这一句后,输出async2后,await会让出当前线程,将后面的代码加到任务队列中,然后继续执行test()函数后面的同步代码
    await async2(); console.log("async1 end"); } async function async2() { console.log( 'async2'); } console.log("script start"); setTimeout(function () { console.log("settimeout"); },0); async1(); new Promise(function (resolve) { console.log("promise1"); resolve(); }).then(function () { console.log("promise2"); }); console.log('script end');

    好啦,我们来看答案:

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

    执行到setTimeout函数时,将其回调函数加入队列(此队列与promise队列不是同一个队列,执行的优先级低于promise)。继续执行

    创建promise对象里面的代码属于同步代码,promise的异步性体现在then与catch处,所以promise1被输出,然后将then函数的代码加入队列,继续执行同步代码,输出script end。

    至此同步代码执行完毕,开始从队列中调取任务执行,由于刚刚提到过,setTimeout的任务队列优先级低于promise队列,所以首先执行promise队列的第一个任务,执行then方法的部分,输出promise2,然后执行async1中await后面的代码,输出async1 end。

    最后promise队列中任务执行完毕,再执行setTimeout的任务队列,输出settimeout。

    至此,该题的输出结果分析完毕了,这类的执行结果可以用一句话总结,先执行同步代码,遇到异步代码就先加入队列,然后按入队的顺序执行异步代码,最后执行setTimeout队列的代码。

    补充一下队列任务优先级:promise.Trick()>promise的回调>async>setTimeout>setImmediate,

    不过如果 await 后面跟着 Promise 的话,async1 end 需要等待三个 tick 才能执行到。那么其实这个性能相对来说还是略慢的,所以 V8 团队借鉴了 Node 8 中的一个 Bug,在引擎底层将三次 tick 减少到了二次 tick。也就是说v8引擎浏览器打印出来的,promise2和async1 end是相反的。

     
    ————————————————
    版权声明:本文为CSDN博主「yujin0222」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/baidu_33295233/article/details/79335127

  • 相关阅读:
    .net core 3.1 添加mysql ef core
    使用HttpContext.SignInAsync实现简单的授权
    linux部署harbor和基本使用
    委托,事件,Action , Func
    .net core 第三方Microsoft账号登录
    Persist Security Info 参数的作用
    SQL Server2008附加数据库之后显示为只读时解决方法
    Oracle 数据库学习笔记(五)(数据库修改密码(表密码,sys密码,system密码))
    JS做”返回顶部”按钮功能并实现滑动效果
    SQL Server 2008 允许远程链接 解决方法
  • 原文地址:https://www.cnblogs.com/psxiao/p/11608961.html
Copyright © 2020-2023  润新知