JS异步事件顺序:setTimeout,async,promise
为什么最近更新那么频繁,还不是因为笔试的时候瞎了?
先说异步事件执行顺序的规则:
1. 定时器异步队列和promise队列不是同一队列,promise优先级高于setTimeout;
2. 创建promise对象里面的代码属于同步代码,其异步性体现在then和catch处;
3. 遇到await,先执行完await所在行的事件(阻塞到执行完成),然后让出当前线程,继续走同步事件,await后面的语句等同于Promise.resolve(),进入promise的异步队列排队。
好了,理解这些就能做题了
async function async1() {
console.log("async1 start"); //2 同步事件
await async2(); //3 执行完后继续走同步事件
console.log("async1 end"); //6 await之后的代码 首选进入promise异步队列
}
async function async2() {
console.log( 'async2'); //
}
console.log("script start"); // 1 同步事件!
setTimeout(function () {
console.log("settimeout"); //8 最后,定时器的异步走最后!!!
},0);
async1(); //2 走异步函数内部的同步事件
new Promise(function (resolve) {
console.log("promise1"); //4 同步事件!
resolve();
}).then(function () {
console.log("promise2"); //7 最后进入promise异步队列
});
console.log('script end'); //5 同步事件!
加了备注了,但还是上结果吧
注意:await只能存在与 async 定义的函数内部, 遇到await 之后,代码就暂停执行了,必须等await代码执行完成后,才能进入下一步,下一步仍是先走同步代码。
懂了么?如果对 async 还迷糊,那就做以下测试!
上代码认识一下async
async function timeout() {
console.log('hello world'); //类似于创建promise对象时的同步代码
return '我属于promise对象' //这才是promise对象返回的resolve对象
}
timeout().then((result)=>{
console.log(result)
})
console.log('虽然在后面,但是我先执行'); //同步事件
输出结果:
所以:async所定义的异步函数,其返回值是promise对象
async function timeout(flag) {
if (flag) {
return 'hello world'
} else {
return 'my god, failure'
}
}
console.log(timeout(true)) // 调用Promise.resolve() 返回promise 对象。
console.log(timeout(false)); // 调用Promise.reject() 返回promise 对象。
JS异步事件顺序:setTimeout,async,promise的更多相关文章
- 前端知识总结--js异步事件顺序
js中异步事件中容易混淆的 Promise 和 setTimeout 的执行顺序是怎样的? setTimeout(() => console.log(1), 0); new Promise(fu ...
- js 异步执行顺序
参考文章: js 异步执行顺序 1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...
- JS异步执行之setTimeout 0的妙用
最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的 ...
- node js 异步运行流程控制模块Async介绍
1.Async介绍 sync是一个流程控制工具包.提供了直接而强大的异步功能.基于Javascript为Node.js设计,同一时候也能够直接在浏览器中使用. Async提供了大约20个函数,包含经常 ...
- 从一到面试题了解js异步机制:setTimeout 和 Pronmise
1.毫无疑问setTimeout是最晚输出的 2.请无视undefined,这是浏览器的返回值. 3.new Promise中并不是异步,而.then()后才是异步.
- JS 冒泡事件顺序
参考:https://www.cnblogs.com/diaoyan/p/5630014.html
- js异步队列之理解
起因 最近看到一篇关于js异步执行顺序的解答,觉得有所收获,遂记录下来. marcotask和microtask js中异步队列可以分为两类,marcotask队列和microtask队列, marc ...
- 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async
JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...
- JS异步编程 (2) - Promise、Generator、async/await
JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...
随机推荐
- Git 常用命令简单记录
分布式版本控制系统,跟踪文本文件的改动 ubuntu安装: sudo apt install git 安装完成后,设置使用的用户名和邮箱: 全局: git config --global user.n ...
- Nexus搭建Maven私服中央仓库
一.概述 1.概要 现在的项目基本都是用Maven来管理工程,这样一来在公司内容搭建一个私服就非常有必要了,这样一来可以管理公司内部用的JAR包,也可以管理第三方的各种JAR来,以免每次都要从外网的仓 ...
- 【LeetCode】栈 stack(共40题)
[20]Valid Parentheses (2018年11月28日,复习, ko) 给了一个字符串判断是不是合法的括号配对. 题解:直接stack class Solution { public: ...
- Vue列表渲染-变异方法
Vue 包含一组观察数组的变异方法,变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组 所以它们也将会触发视图更新.这些方法如下: push() pop() shi ...
- jmeter 参数化1_User Parameters(用户参数)
参数化:是自动化测试脚本的一种常用技巧,可将脚本中的某些输入使用参数来代替,如登录时利用GET/POST请求方式传递参数的场景,在脚本运行时指定参数的取值范围和规则. 脚本在运行时,根据需要选取不同的 ...
- pytest 教程
https://blog.csdn.net/lb245557472/article/details/90341297 https://blog.csdn.net/yyang3121/article/d ...
- linux学习-常用文本处理命令
1.文本处理命令 (1) tr 转换或删除字符 tr [OPTION]...SET1 SET2 选项: -c 取SET1字符串的补集 -d 删除属于SET1中的字符 -s 把连续重复出现的字符以单独一 ...
- 如何在MaxCompute上处理存储在OSS上的开源格式数据
0. 前言 MaxCompute作为使用最广泛的大数据平台,内部存储的数据以EB量级计算.巨大的数据存储量以及大规模计算下高性能数据读写的需求,对于MaxCompute提出了各种高要求及挑战.处在大数 ...
- java使用开源类库Tesseract实现图片识别
Tesseract-OCR支持中文识别,并且开源和提供全套的训练工具,是快速低成本开发的首选. Tess4J则是Tesseract在Java PC上的应用 Tesseract的OCR引擎最先由HP实验 ...
- JSP中获取客户端或浏览端信息的方式
request应用:在JSP页面显示访问者IP 方式一:纯前台,不涉及后台操作.直接在jsp页面中需要显示IP的地方使用 代码:<%=request.getRemoteAddr()%> ...