为什么最近更新那么频繁,还不是因为笔试的时候瞎了?

先说异步事件执行顺序的规则:

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的更多相关文章

  1. 前端知识总结--js异步事件顺序

    js中异步事件中容易混淆的 Promise 和 setTimeout 的执行顺序是怎样的? setTimeout(() => console.log(1), 0); new Promise(fu ...

  2. js 异步执行顺序

    参考文章: js 异步执行顺序   1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...

  3. JS异步执行之setTimeout 0的妙用

    最近在工作中遇到一些问题,大致是关于js执行问题的.由于没搞清执行顺序,导致出现了一些奇怪的bug. 所以这里整理一些有关异步执行的知识(冰山一角角)... 大家都知道js是单线程的,执行起来是顺序的 ...

  4. node js 异步运行流程控制模块Async介绍

    1.Async介绍 sync是一个流程控制工具包.提供了直接而强大的异步功能.基于Javascript为Node.js设计,同一时候也能够直接在浏览器中使用. Async提供了大约20个函数,包含经常 ...

  5. 从一到面试题了解js异步机制:setTimeout 和 Pronmise

    1.毫无疑问setTimeout是最晚输出的 2.请无视undefined,这是浏览器的返回值. 3.new Promise中并不是异步,而.then()后才是异步.

  6. JS 冒泡事件顺序

    参考:https://www.cnblogs.com/diaoyan/p/5630014.html

  7. js异步队列之理解

    起因 最近看到一篇关于js异步执行顺序的解答,觉得有所收获,遂记录下来. marcotask和microtask js中异步队列可以分为两类,marcotask队列和microtask队列, marc ...

  8. 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async

    JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...

  9. JS异步编程 (2) - Promise、Generator、async/await

    JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...

随机推荐

  1. Kintex7 XC7K325T 板卡五兄弟

    Kintex 7五兄弟 1.     基KC705E 增强版基于FMC接口的Xilinx Kintex-7 FPGA K7 XC7K325T PCIeX8 接口卡(136) 本板卡是Xilinx公司芯 ...

  2. 阿里云LNMP环境安装

    文档里有一键部署LNMP环境和手动搭建LNMP环境您看下 镜像部署 LNMP 环境:https://help.aliyun.com/document_detail/25427.html?spm=517 ...

  3. 使用macOS苹方替换Windows 10微软雅黑

    关于微软雅黑 Windows从Vista开始用到现在的”微软雅黑”十多年以来基本没什么大改动,而大家的显示器从CRT进化到了IPS高分屏,十年前看着还OK的字体现在在绝大多数屏幕上可能就是这个样子的: ...

  4. css解决表格嵌套表格出现多余边框的方法

    这是昨天遇到的问题因为表格里面套了层表格出现了双层的边框,昨天折腾了很久最终才知道有个属性叫 border-style:hidden 可以解决边框冲突! 左边的边框加上了该属性之后

  5. springboot使用异步查询数据

    主要适用于需要查询多种类型的数据,而且二者的参数没有关联的情况. 1.开启异步调用注解 2.创建抽象类,定义相关方法 /** * @author:YZH * time: 2019/8/8 12:16 ...

  6. https原理和如何配置https

    参考:https://blog.51cto.com/11883699/2160032 上面说的已经很好地,我这里简单做个总结: 在网上我们做数据交互时候一般用的http协议,但是这种方式会使得交互内容 ...

  7. 【Mybatis】Mybatis缓存

    mybatis提供了缓存机制减轻数据库压力,提高数据库性能 mybatis的缓存分为两级:一级缓存.二级缓存 一级缓存是SqlSession级别的缓存,缓存的数据只在SqlSession内有效 二级缓 ...

  8. CSU 1503: 点到圆弧的距离(计算几何)

    题目描述 输入一个点 P 和一条圆弧(圆周的一部分),你的任务是计算 P 到圆弧的最短距离.换句话 说,你需要在圆弧上找一个点,到 P点的距离最小. 提示:请尽量使用精确算法.相比之下,近似算法更难通 ...

  9. 安装并配置前端自动化工具-gulp

    由于现在前端自动化已经很有必要了,所以我今天死皮烂脸的找了2位前端大咖帮助我安装和配置gulp,讲真,这一步步弄下来直到安装配置成功,到现在还是迷迷糊糊,不过我还是把这些步骤给记录下来,以防下次不记得 ...

  10. Vue-Router原理

    Hash 与 History 路由原理 实现路由 /** * 1.前端路由与后端路由的区别 后端路由: 输入url => 请求发送到服务器 => 服务器解析请求路径 => 拿到对应页 ...