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

  • 相关阅读:
    OSG在VS2008下的配置安装
    MFC编译Freetype2.3.7
    在VS中编译Opencascade6.6.0
    MFC 双缓存绘图
    SDI在自定义的工具栏上添加下拉控件
    DECLARE_MESSAGE_MAP用法
    64位电脑上安装MySQL进行MFC开发的相关问题
    VS2005+VTK读入点云文件
    VS2005编译VTK5.10.1
    HTML入门:Tag学习
  • 原文地址:https://www.cnblogs.com/javencs/p/10481498.html
Copyright © 2011-2022 走看看