js 异步执行顺序
console.log('script start')
async function async1() {
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2 end')
}
async1() setTimeout(function() {
console.log('setTimeout')
}, 0) new Promise(resolve => {
console.log('Promise')
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
}) console.log('script end')
执行结果?
分析:
首先执行 同步代码:
async function async1() {
await async2()
console.log('async1 end')
}
new Promise(resolve => {
resolve()
})
.then(function() {
console.log('promise1')
})
.then(function() {
console.log('promise2')
})
5. 然后根据先入先出的对列方式,先执行 await async2() 后面阻碍的函数 console.log('async1 end')
6. 执行promise的resolve函数
new Promise(resolve => {
resolve()
})
也就是接下来的两个then: console.log('promise1') ---- console.log('promise2') ;
7. 最后执行的是 setTimeout函数 console.log('setTimeout') ;
综上所述,以上代码执行的顺序是:
题目2:
(function() { setTimeout(() => {
console.log(0);
}); new Promise(resolve => {
console.log(1); setTimeout(() => {
resolve();
Promise.resolve().then(() => console.log(2));
console.log(3);
}); Promise.resolve().then(() => console.log(4)); }).then(() => {
console.log(5);
Promise.resolve().then(() => console.log(8));
setTimeout(() => console.log(6));
}); console.log(7); })();
1. 同样先执行同步代码,且先把setTimeout去掉:
new Promise(resolve => {
console.log(1);
Promise.resolve().then(() => console.log(4)); //微观任务
}).then(() => { //then函数是执行对应的 resolve 的时候才执行的
console.log(5);
Promise.resolve().then(() => console.log(8));//微观任务
}); console.log(7);
可以看出先执行: console.log(1);console.log(7);
2. 执行微任务 Promise.resolve().then(() => console.log(4));
代码变成了:
(function() {
setTimeout(() => {
console.log(0);
});
new Promise(resolve => {
setTimeout(() => {
resolve();
Promise.resolve().then(() => console.log(2));
console.log(3);
});
}).then(() => {
console.log(5);
Promise.resolve().then(() => console.log(8)); //这句是多加的
setTimeout(() => console.log(6));
});
})();
只剩下宏观任务(微观任务在宏观任务里,也就是宏观任务外面不在有微观任务了)
3. 执行 console.log(0);
4.再执行 new Promise 中的 setTimeout,先执行里面的同步函数:console.log(3)
5. 再执行上面的 resolve,对应的是下面的then函数:
then(() => {
console.log(5);
Promise.resolve().then(() => console.log(8)); //这句是多加的
setTimeout(() => console.log(6));
}
所以先执行 console.log(5);
剩下的都是微观任务和宏观任务,先看微观任务:
new Promise(resolve => {
resolve();
Promise.resolve().then(() => console.log(2));
}).then(() => {
Promise.resolve().then(() => console.log(8));
setTimeout(() => console.log(6));
});
所以根据队列中的微观任务顺序先执行:console.log(2),在执行then中的 console.log(8);
最后再执行 console.log(6)
综上所述,结果为
(function() {
setTimeout(() => {
console.log(0);
}); new Promise(resolve => { console.log(1); setTimeout(() => {
resolve();
Promise.resolve().then(() => {
console.log(2);
setTimeout(() => console.log(3));
Promise.resolve().then(() => console.log(4));
});
}); Promise.resolve().then(() => console.log(5)); }).then(() => { console.log(6);
Promise.resolve().then(() => console.log(7));
setTimeout(() => console.log(8)); }); console.log(9);
})();
图a
由图a中的任务队列可知:
第二步: 执行微任务3,打印出 ;
第三步:执行宏任务1,打印出 ,
第四步:开始执行宏任务2;如图:
图b
第五步:由图b中的任务队列可知, 执行微任务4,打印出 6,如图:
图c
第六步:由图c中的任务队列可知, 执行微任务5,打印出;如图
图d
由图d的任务队列可知,
第七步:执行微任务6,打印出;
第八步:执行微任务9,打印出;
第九步:执行宏任务7,打印出8;
第十步:执行宏任务8,打印出3;
即答案是:
js 异步执行顺序的更多相关文章
- 浅析js的执行顺序
javascript是一种描述型的脚本语言,是一种解析语言,由浏览器动态解析,不同种类的浏览器不同版本的浏览器对于js的解析有着微小的差别,不同浏览器的js解析引擎效率也有高低,下面来给大家分析一下j ...
- js代码执行顺序问题
前 言 LiuDaP 今天就给大家介绍一个特别基础的东西,javascript中函数的一点儿小知识(js代码的执行顺序),希望对大家有那么一点点帮助吧!!! 一.js--->单线程 严格意 ...
- 浅析JS异步执行机制
前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面.本文将针对JS异步执行机制进行一个简单的分析. 从一份代码讲起 下面是两个经典的JS定时执行函数,这两个函数的区别相信对JS有 ...
- 关于js事件执行顺序
关于js事件执行顺序小技巧 js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 ...
- [js]js代码执行顺序/全局&私有变量/作用域链/闭包
js代码执行顺序/全局&私有变量/作用域链 <script> /* 浏览器提供全局作用域(js执行环境)(栈内存) --> 1,预解释(仅带var的可以): 声明+定义 1. ...
- 关于js事件执行顺序小技巧
js事件执行顺序是js中一个老生常谈的一个话题, 聊这个话题之前我们先谈谈怎么给页面元素绑定我们需要的事件 1.给页面元素绑定事件 a)直接在元素上面加上需要绑定的事件,如 <button ty ...
- js异步执行 按需加载 三种方式
js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...
- JS异步执行之setTimeout 0的妙用
最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的 ...
- 前端知识总结--js异步事件顺序
js中异步事件中容易混淆的 Promise 和 setTimeout 的执行顺序是怎样的? setTimeout(() => console.log(1), 0); new Promise(fu ...
随机推荐
- c# 无法加载DLL:找不到指定的模块(异常来自HRESULT:0X8007007E)
c# 无法加载DLL“xxxx”:找不到指定的模块(异常来自HRESULT:0X8007007E)的一个解决方法 以前的一个c#项目,今天运行的时候突然发现调用DLL时出现了下面的错误. 心中很诧异, ...
- axios.js 在测试机ios7.1的iphone4中不能发送http请求解决方案
原因:axios使用promise语法,浏览器不支持该语法 解决思路:使浏览器支持promise语法 具体代码: 安装es6-promise,npm i es6-promise -D. 在引入axio ...
- ztree通过id获取节点对象
var treeObj = $.fn.zTree.getZTreeObj("treeId"); var node = treeObj.getNodeByParam("id ...
- 学习Ajax小结
Ajax 学习 1.ajax的概念 局部刷新技术,不是一门新技术,是多种技术的组合,是浏览器端技术 2.作用 可以实现 ...
- python gdal安装与简单使用
原文链接:python gdal安装与简单使用 gdal安装方式一:在网址 https://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal 下载对应python版本的 ...
- Python3之字符串格式化format函数详解(上)
概述 在Python3中,字符串格式化操作通过format()方法或者f’string’实现.而相比于老版的字符串格式化方式,format()方法拥有更多的功能,操作起来更加方便,可读性也更强.该函数 ...
- 计算机网络自顶向下方法第4章 网络层:数据平面 (Network layer)
4.1 网络层概述 网络层主要功能为转发(将数据从路由器输入接口转移到合适的输出接口)和路由选择(端到端的路径选择),每台路由器都有一张转发表,用最长前缀匹配规则来转发. 4.1.1 转发和路由选择 ...
- FFmpeg开发教程一、FFmpeg 版 Hello world
本系列根据项目ffmpeg-libav-tutorial翻译而来 Chapter 0 - 万物之源 -- hello world 然而,本节的程序并不会在终端打印"Hello world&q ...
- FFplay源代码分析:整体流程图(仅供参考)
- 记一次构建SaaS平台项目失败后的反思(收集的客户需求太少,且没有区分重点,闭门造车。技术演变要渐进)
记一次构建SaaS平台项目失败后的反思 前言: 笔者从2017年起开始着手将公司现有的软件系统改造成多租户模式,以降低整个系统的运营成本.但最后这个项目以失败告终.今天,我将对这个SaaS项目是如何走 ...