/*
原则：
执行完当前promise，
会把紧挨着的then放入microtask队尾，
链后面的第二个then暂不处理分析，
*/
一、
new Promise((resolve, reject) => {
console.log("promise1")
resolve()
}).then( () => {
console.log("then11")
new Promise((resolve, reject) => {
console.log("promise2")
resolve()
}).then(() => {
console.log("then21")
}).then(() => {
console.log("then23")
})
}).then(() => {
console.log("then12")
})
1.先执行同步部分代码输出 "promise1"
2.第一个then执行, 产生了promise对象, 放到microtask里(第二个then必须要等要第一个then产生的promise同步部分执行完才能放到队列里)
3.then方法构建了一个promise, 同步代码中输出 then11
4.then方法里又新建了promise 执行同步部分 输出promise2, 把第一个then放到microtask里, 把外面的then放到microtask里
5.取出microtask, 输出then21，然后里面第二个then进入microtask, 输出then12
6.输出then23
二、
new Promise((resolve, reject) => {
console.log("promise1")
resolve()
}).then(() => {
console.log("then11")
new Promise((resolve, reject) => {
console.log("promise2")
resolve()
}).then(() => {
console.log("then21")
}).then(() => {
console.log("then23")
})
}).then(() => {
console.log("then12")
})
new Promise((resolve, reject) => {
console.log("promise3")
resolve()
}).then(() => {
console.log("then31")
})
1.执行外层Promise同步代码
输出promise1 第一个then进入microtask队列,第二个then不进入(因为这个要等第一个then产生的promise初始化完)
2.输出promise3，最下面的then进队列
此时队列中
----出口方向--->
[then31],[then1]
3.执行then1 输出了then11 构造了一个新的promise,执行同步代码promise2 then21进入队列,then12进入队列
---出口方向-->
[then12],[then21],[then31]
4.输出then31,then21,此时最后一个then,then23进入队列
---出口方向->
[then23],[then12],[then21]
输出 then21, then12, then23
三、
async/await
async function async1() {
console.log("async1 start");
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');
//script start,async1 start,async2,promise1,script end,async1 end,promise2,settimeout
// 处理这种问题的方法:await后面跟的是一个promise对象。如果await函数,那么这个函数里的部分就应该同步执行,
// await下面的语句相当于promise.then里面的语句。
async/await 执行顺序详解
随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 ...
错误的理解引起的bug async await 执行顺序
今天有幸好碰到一个bug,让我知道了之前我对await async 的理解有点偏差. 错误的理解 之前我一直以为 await 后面的表达式,如果是直接返回一个具体的值就不会等待,而是继续执行asyn ...
setTimeout,promise,promise.then, async,await执行顺序问题
今天下午看了好多关于这些执行顺序的问题 经过自己的实践 终于理解了 记录一下就拿网上出现频繁的代码来说: async function async1() { console.log('async1 ...
promise.then, setTimeout,await执行顺序问题
promise.then VS setTimeout 在chrome和node环境环境中均输出2, 3, 1, 先输出2没什么好说的,3和1顺序让人有些意外 原因: 有一个事件循环,但是任务队列可以有 ...
async和await执行顺序
关于执行顺序和线程ID,写了一个小程序来检测学习: using System; using System.Net; using System.Threading; using System.Threa ...
javascript ES6 新特性之 Promise，ES7 async / await
es6 一经推出,Promise 就一直被大家所关注.那么,为什么 Promise 会被大家这样关注呢?答案很简单,Promise 优化了回调函数的用法,让原本需要纵向一层一层嵌套的回调函数实现了横向 ...
JS中For循环中嵌套setTimeout()方法的执行顺序
在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...
AngularJS指令嵌套时link函数执行顺序的问题
今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...
JS中的async/await的执行顺序详解
虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉 ...
随机推荐
【PCB】【AD使用】多图纸设计
转ZIchenzelin2009的csdn博客:http://blog.csdn.net/chenzelin2009/article/details/5751251# 图纸结构 -平行结构 -层次结构 ...
初学structs2，结果类型简单示例
一.自定义结果处理类,structs.xml中package节点下加result-types节点,在result-types节点下配置result-type的属性.然后在配置的action中的resu ...
Asp.Net IEnumerable,ICollection,IList,List区别
做C#的同学们,都知道,一类只能有一个继承类,但可以实现多个接口.这句话就告诉我们:IEnumerable,ICollection,IList,List区别了 首先我看看 IEnumerable: / ...
delphi idhttp 实战用法(TIdhttpEx)
以delphi XE8 自带indy(10.5.8.0)组件为例,分享实战中遇到的问题及解决方法. TIdHttpEx 用法实例01[多线程获取网页](包含完整源码) 实例02(如何Post参数,如何 ...
servlet实现方式(未完待续)
servlet的是方式有三种,分别是: 1,实现servlt接口 点击查看详情 2,继承GenericServlet类[适配器模式] 3,继承HttpServlet类[模板方法设计模式]最常用的方法 ...
jquery easyui datagrid改变某行的值
$("#DeterminateMembers").datagrid("updateRow",{index:index,row:{fzr:"0" ...
layui轮播中箭头不起作用问题
layui轮播中箭头不起作用问题 layui轮播插件在使用中发现箭头不起作用其他都合适,是什么原因造成的呢?发现单独提出layui中的demo是合适的,通过仔细慢慢的寻找,发现layui.use('c ...
Filter过滤器与Session会话跟踪技术
Filter过滤器 适用场景 1.为web应用程序的新功能建立模型(可被添加到web应用程序中或者从web应用程序中删除而不需要重写基层应用程序代码)2.用户授权Filter:负责检查用户请求,根据请 ...
j2ee model1模型完成分页逻辑的实现 详解!
在显示用户全部信息的页面,在显示全部数据的时候,长长的滚动条,像是没有边界的天空一样, 让用户查看数据很不方便. 于是, 我们要把这些数据分页显示, 就像office的word一样,每页显示一定数量的 ...
P1483 序列变换
题目描述 给定一个由n个整数构成的序列,你需要对它进行如下操作: 操作1:输入格式“1 x y”,表示把所有a[kx](k为正整数,kx<=n)都加上y. 操作2:输入格式“2 j”,表示输出a ...
1110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
