博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Promise 执行时序
阅读量:5313 次
发布时间:2019-06-14

本文共 1249 字,大约阅读时间需要 4 分钟。

昨天看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

 

转载于:https://www.cnblogs.com/javencs/p/10481498.html

你可能感兴趣的文章
加固linux
查看>>
IPSP问题
查看>>
10.17动手动脑
查看>>
WPF中Image显示本地图片
查看>>
Windows Phone 7你不知道的8件事
查看>>
实用拜占庭容错算法PBFT
查看>>
java的二叉树树一层层输出,Java构造二叉树、树形结构先序遍历、中序遍历、后序遍历...
查看>>
php仿阿里巴巴,php实现的仿阿里巴巴实现同类产品翻页
查看>>
Node 中异常收集与监控
查看>>
Excel-基本操作
查看>>
面对问题,如何去分析?(分析套路)
查看>>
Excel-逻辑函数
查看>>
面对问题,如何去分析?(日报问题)
查看>>
数据分析-业务知识
查看>>
nodejs vs python
查看>>
poj-1410 Intersection
查看>>
Java多线程基础(一)
查看>>
TCP粘包拆包问题
查看>>
Java中Runnable和Thread的区别
查看>>
SQL Server中利用正则表达式替换字符串
查看>>