先来一道关于async/await、promise和setTimeout的执行顺序的题目:

  1. async function async1() {
  2. console.log('async1 start');
  3. await async2();
  4. console.log('asnyc1 end');
  5. }
  6. async function async2() {
  7. console.log('async2');
  8. }
  9. console.log('script start');
  10. setTimeout(() => {
  11. console.log('setTimeOut');
  12. }, 0);
  13. async1();
  14. new Promise(function (reslove) {
  15. console.log('promise1');
  16. reslove();
  17. }).then(function () {
  18. console.log('promise2');
  19. })
  20. console.log('script end');

执行结果:

  1. script start
  2. async1 start
  3. async2
  4. promise1
  5. script end
  6. asnyc1 end
  7. promise2
  8. setTimeOut

首先,我们先来了解一下基本概念:

js EventLoop 事件循环机制:

JavaScript的事件分两种,宏任务(macro-task)和微任务(micro-task)

  • 宏任务:包括整体代码script,setTimeout,setInterval
  • 微任务:Promise.then(非new Promise),process.nextTick(node中)

  事件的执行顺序,是先执行宏任务,然后执行微任务,这个是基础,任务可以有同步任务和异步任务,同步的进入主线程,异步的进入Event Table并注册函数,异步事件完成后,会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue),同步任务执行完成后,会从Event Queue中读取事件放入主线程执行,回调函数中可能还会包含不同的任务,因此会循环执行上述操作。
  注意: setTimeOut并不是直接的把你的回掉函数放进上述的异步队列中去,而是在定时器的时间到了之后,把回掉函数放到执行异步队列中去。如果此时这个队列已经有很多任务了,那就排在他们的后面。这也就解释了为什么setTimeOut为什么不能精准的执行的问题了。setTimeOut执行需要满足两个条件:

  1. 主进程必须是空闲的状态,如果到时间了,主进程不空闲也不会执行你的回掉函数
  2. 这个回掉函数需要等到插入异步队列时前面的异步函数都执行完了,才会执行

简单理解就是:

  了解了什么是宏任务和微任务,就好理解多了,首先执行 宏任务 => 微任务的Event Queue => 宏任务的Event Queue

promise、async/await

  1. 首先,new Promise是同步的任务,会被放到主进程中去立即执行。而.then()函数是异步任务会放到异步队列中去,那什么时候放到异步队列中去呢?当你的promise状态结束的时候,就会立即放进异步队列中去了。
  2. 带async关键字的函数会返回一个promise对象,如果里面没有await,执行起来等同于普通函数;如果没有await,async函数并没有很厉害是不是
  3. await 关键字要在 async 关键字函数的内部,await 写在外面会报错;await如同他的语意,就是在等待,等待右侧的表达式完成。此时的await会让出线程,阻塞async内后续的代码,先去执行async外的代码。等外面的同步代码执行完毕,才会执行里面的后续代码。就算await的不是promise对象,是一个同步函数,也会等这样操作

步入正题:

根据图片显示我们来整理一下流程:

  1. 执行console.log('script start'),输出script start;
  2. 执行setTimeout,是一个异步动作,放入宏任务异步队列中;
  3. 执行async1(),输出async1 start,继续向下执行;
  4. 执行async2(),输出async2,并返回了一个promise对象,await让出了线程,把返回的promise加入了微任务异步队列,所以async1()下面的代码也要等待上面完成后继续执行;
  5. 执行 new Promise,输出promise1,然后将resolve放入微任务异步队列;
  6. 执行console.log('script end'),输出script end;
  7. 到此同步的代码就都执行完成了,然后去微任务异步队列里去获取任务
  8. 接下来执行resolve(async2返回的promise返回的),输出了async1 end。
  9. 然后执行resolve(new Promise的),输出了promise2。
  10. 最后执行setTimeout,输出了settimeout。

参考博客:https://blog.csdn.net/yun_hou/article/details/88697954

关于async/await、promise和setTimeout执行顺序的更多相关文章

  1. Promise和setTimeout执行顺序 面试题

    看到过下面这样一道题: (function test() { setTimeout(function() {console.log(4)}, 0); new Promise(function exec ...

  2. promise 及 setTimeout 执行顺序

    setTimeout(function() { console.log(1); }, 0); new Promise(function(res, rej) { res(2); console.log( ...

  3. promise和setTimeout执行顺序的问题

    提出问题,问题代码为 setTimeout(function(){console.log(1)},0); new Promise(function(resolve){ console.log(2) f ...

  4. async await promise 执行时序

    先用一个例子来说明async await promise的执行顺序 console.log('start'); async function test(){ console.log('111'); a ...

  5. 理解koa2 之 async + await + promise

    koa是下一代的Node.js web框架. 我们首先使用koa来实现一个简单的hello world吧!假如目前的项目结构如下: ### 目录结构如下: koa-demo1 # 工程名 | |--- ...

  6. 浅谈循环中setTimeout执行顺序问题

    浅谈循环中setTimeout执行顺序问题 (下面有见解一二) 期望:开始输出一个0,然后每隔一秒依次输出1,2,3,4. for (var i = 0; i < 5; i++) { setTi ...

  7. async await promise

    async 异步函数,以后可能会用得很广. 1.箭头函数: 没有{ }时不写return 也有返回值 2.Promise : 异步神器,很多异步api都是基于Promise 3.new Promise ...

  8. 一种通过async/await实现函数同步执行的方式

    const testArr = [ () => { return new Promise((resolve, reject) => { setTimeout(()=> { alert ...

  9. Async/await promise实现

    An async function can contain an await expression that pauses the execution of the async function an ...

随机推荐

  1. zabbix4.0开源监控部署

    ---恢复内容开始--- 1.安装依赖环境 yum -y install telnet net-tools python-paramiko dejavu-sans-fonts python-setup ...

  2. 基于 cobbler 实现自动安装 linux 系统

    使用 cobbler 实现自动安装 centos 6.7系统 1.yum install cobbler -y 安装 cobbler ,有依赖关系,会自动把 TFTP .HTTP 服务安装上:cobb ...

  3. 简单的 smartpointer

    水水地 发第一篇blog, 瘦身版的smartpointer. template <typename T> class CountedPtr { private: T* ptr; long ...

  4. windows下大数据开发环境搭建(1)——Hadoop环境搭建

    所需环境 jdk 8 Hadoop下载 http://hadoop.apache.org/releases.html 配置环境变量 HADOOP_HOME: C:\hadoop-2.7.7 Path: ...

  5. <automate the boring stuff with python>---第七章 正则实例&正则贪心&匹配电话号码和邮箱

    第七章先通过字符串查找电话号码,比较了是否使用正则表达式程序的差异,明显正则写法更为简洁.易扩展.模式:3 个数字,一个短横线,3个数字,一个短横线,再是4 个数字.例如:415-555-4242 i ...

  6. [FPGA]Verilog实现可自定义的倒计时器(24秒为例)

    目录 想说的话... 样例_边沿检测计数器 代码讲解 仿真演示 拓展_自定义倒计时数和倒计时间隔 代码讲解 仿真演示 总结 实例_24秒倒计时器 想说的话... 本次实现的是一个24秒倒计时器,功能顾 ...

  7. Obtaining the backtrace - libunwind

    Sometimes when working on a large project, I find it useful to figure out all the places from which ...

  8. 【集训Day1 测试】【USACO】照相

    照相(fairphoto) [题目描述] 有N 头奶牛站在一条数轴上,第 i 头奶牛的位置是 Pi,奶牛不会重叠站在同一个位置, 第i 头奶牛的颜色是 Ci,其中 Ci 要么是字符'G'要么是字符'H ...

  9. 折腾笔记-计蒜客T1167AC记

    查看原题 原题地址 思路: 判断回文+判断质数 初步代码: #include <bits/stdc++.h> using namespace std; bool prime(int n) ...

  10. C语言基础——进制转换 / 数据表示

    第一部分:进制转换 二进制:由0~1构成,逢2进1 八进制:由0~7构成,逢8进1 十六进制:由0~9.A~F构成,逢16进1 两个基本概念 基数:n进制基数为n 123.4 = 1*10^2 + 2 ...