zoukankan      html  css  js  c++  java
  • Promise 执行时序

    昨天看mdn的时候对Promise的执行时序有些疑问,就看了看 js 的事件循环:

    const wait = ms => new Promise(resolve => setTimeout(resolve, ms));
    wait().then(() => console.log(4));
    Promise.resolve().then(()
    => console.log(2)).then(() => console.log(3));
    console.log(
    1);

    可以先估计一下执行结果。。。

    先介绍一下宏任务:script(代码块)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)

    // 比如上面的这段代码本身就是一个宏任务;

    微任务:Promise.then、MutaionObserver、process.nextTick(Node.js 环境);// 微任务会在一轮宏任务执行结束之后执行

    下面开始执行上面代码(宏任务):

    1. 申明变量 wait 时同步执行 new Promise,进入promise 里面是个 setTimeout ,因为 setTimeout  不是同步的,把 setTimeout 放入另一个宏任务等待执行;

    2. 然后继续向下执行 wait.then();而上面说了 .then() 是放入微任务的,所以把 then() 放入微任务等待执行;

    3. 继续向下,同步执行 Promise.resolve(),之后又是 .then() 把它放入微任务;

    4. 执行console.log(1)

    当前打印情况是:1

    此时一个事件循环结束,去微任务里查看是否有要执行的微任务,此时微任务里有两个 .then();第一个 .then() 的Promise 状态未执行结束;第二个 .then() 的Promise的执行状态是resolve的,那么就可以执行 第二个 .then() 了

    微任务执行:

    .then(() => console.log(2)).then(() => console.log(3)); // 因为then() 里面都是console,所有同步执行;

    至此微任务执行结束,打印情况: 1,2,3

    下面开始第二轮的宏任务:

    1. 根据上述分析,此时宏任务里只有一个 setTimeout  ,所以执行 setTimeout  ;执行后它的 Promise 为 resolve 状态;

    2. 宏任务为空执行结束 ;

    下面开始第二轮的微任务:

    1. 此时微任务里还有一个 .then() ,而且它的 Promise 已经 resolve 了,所以执行 console.log(4) 

    至此所有任务都执行结束,打印情况:1,2,3,4

  • 相关阅读:
    纯jq编写增删改,弹出框
    li颜色特效
    省市联动Demo
    button轮番点击,只点击一次,鼠标hover
    正则--密码强度验证
    正则--验证邮箱与手机号
    正则表达式--元字符
    C#电脑自动关机代码指令
    1.ASP.NET MVC使用EPPlus,导出数据到Excel中
    6.在MVC中使用泛型仓储模式和依赖注入实现增删查改
  • 原文地址:https://www.cnblogs.com/javencs/p/10481498.html
Copyright © 2011-2022 走看看