首先是一道今日头条的面试题:(听说是今日头条的并且已经烂大街了)

     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' )

这个题我认为的顺序和浏览器的顺序一开始并不一样,让我一度以为浏览器出了问题。

首先需要了解promise,不然后面就很难理解下去。参见:http://es6.ruanyifeng.com/#docs/promise

async是什么?

 简单来讲如果一个函数前面带了async那么,函数的返回值必定是一个promise的对象。如果返回值不是promise对象,会自动的去包装为一个promise对象。

await是什么?

 await可以算是async wait简写。等待async执行结果。

回到代码中,显而易见首先打印的内容是‘script start’,不需要解释。

然后就是setTimeout,虽然时间是0但是只有在这一轮事件循环的底部或者是事件队列为空才会立即执行,很明显既不是底部,事件队列也还未执行完成。

下一个执行到async1();

async1中首先打印‘async1 start’,然后遇到await,await会阻塞后面的代码,先执行async外部的代码,所以会接着打印‘async2’;

之前的await中断了当前async的执行,所以下一个执行的就是promise,promise是直接调用同步代码,所以接着就是‘promise1’;

因为会优先执行同步代码,所以接下来就是打印‘script end’;

执行完毕回到promise接着执行then打印‘promise2’,之后再次回到前面继续执行resolve,但是因为参数为空,所以打印‘undefined’;(promise执行顺序,具体参见:http://es6.ruanyifeng.com/#docs/promise)

这个时候await async2()执行结束,继续async1后面的代码,打印‘async1 end’;

至此所以的事件队列执行结束

前面说了,事件队列为空才会执行setTimeout

所以正确的顺序为:

    script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

 有错误的话欢迎指正。 

初窥async,await的更多相关文章

  1. Asycn/Await 异步编程初窥(二)

    经过总过4天的学习和实践,做完了 WinForm 下 .Net 4.5 的基本异步应用,实现了一个 Http 协议下载的测试程序,为以后使用 .Net 4.5 积累知识和经验.这个小程序完成这样几个作 ...

  2. Asycn/Await 异步编程初窥

    经过两天密集型的学习,翻阅了大量 webpages ,点击了不少重点 blogs,总算基本了解了一些 async/await 搭配使用的入门技巧,总结一下 1. async/await 应该只是语法上 ...

  3. ASP.NET 中的 Async/Await 简介

    本文转载自MSDN 作者:Stephen Cleary 原文地址:https://msdn.microsoft.com/en-us/magazine/dn802603.aspx 大多数有关 async ...

  4. ASP.NET 上的 Async/Await 简介

    原文链接 大多数有关 async/await 的在线资源假定您正在开发客户端应用程序,但在服务器上有 async 的位置吗?可以非常肯定地回答“有”.本文是对 ASP.NET 上异步请求的概念性概述, ...

  5. 仿async/await(一)and Gulp:新一代前端构建利器

    NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...

  6. 学习迭代器实现C#异步编程——仿async/await(一)

    .NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C ...

  7. 聊聊多线程那一些事儿 之 五 async.await深度剖析

     hello task,咱们又见面啦!!是不是觉得很熟读的开场白,哈哈你哟这感觉那就对了,说明你已经阅读过了我总结的前面4篇关于task的文章,谢谢支持!感觉不熟悉的也没有关系,在文章末尾我会列出前四 ...

  8. async & await 的前世今生(Updated)

    async 和 await 出现在C# 5.0之后,给并行编程带来了不少的方便,特别是当在MVC中的Action也变成async之后,有点开始什么都是async的味道了.但是这也给我们编程埋下了一些隐 ...

  9. [.NET] 利用 async & await 的异步编程

    利用 async & await 的异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/5922573.html  目录 异步编程的简介 异 ...

随机推荐

  1. 结合iconworkshop,创建ribbon界面

    mfc实现的程序中,ribbon界面是主流,比较适合测量类项目.几个修改图标的小技巧: 1.现有的bmp,可以直接修改 在好几个地方,已经将IDB_*和显示效果对接清楚了,直接修改这里的bmp,就可以 ...

  2. servlet数据库登录

    一.首先建立如下目录: 二.在html文件中编写代码 三.编写实体类 四.编写服务器相关代码 五.编写数据库代码 六.运行截图 输入错误: 输入正确: 链接:https://pan.baidu.com ...

  3. (转载)Unity 关于动态监听时,点击Button,返回其在数组中的下标

    其实是绕了一圈,把数组里的元素放进数组列表里再读取它的下标 using System.Collections; using System.Collections.Generic; using Unit ...

  4. Field笔记

    一:时区的转换 1.navie 时间 和 aware 时间 navie 时间:不知道自己的时间表示的是哪个时区: aware 时间:知道自己的时间表示的是哪个时区. 2.pytz 库:用来处理时区的库 ...

  5. html5中的几种布局简单比较

    html中的布局主要由静态布局.自适应布局.流式布局以及响应式布局几类,简单比较以下这几种布局的区别和特点. 一 静态布局(Static Layout) 表现:在传统web设计中,不管浏览器尺寸具体大 ...

  6. Docker:bash: vi: command not found

    在使用docker容器时,有时候里边没有安装vim,敲vim命令时提示说:vim: command not found,这个时候就需要安装vim 操作步鄹: 1.apt-get update 2.ap ...

  7. js实现往数组中添加非存在的对象,如果存在就改变键值。

    let arr = [] // 数组中元素数据类型为{name: 'bb', age: 12} // 现在需求是,将每次获得的新对象{name: '', age: }push到数组arr中,但前提是数 ...

  8. STL.vector.iterator的序号

    ZC:网上查到,使用vector时,只要将 find到的iterator(itX)减去vector::begin() 就可以得到itX的序号. 1.需求:得到 某个 iterator在 vector中 ...

  9. inline-block有间隙的兼容处理

  10. JQUERY的属性进行操作

    Jquery方式操作属性(attribute) $().attr(属性名称);   //获得属性信息值 $().attr(属性名称,值);    //设置属性的信息 $().removeAttr(属性 ...