• promise.then VS setTimeout

  在chrome和node环境环境中均输出2, 3, 1, 先输出2没什么好说的,3和1顺序让人有些意外

原因

有一个事件循环,但是任务队列可以有多个。

整个script代码,放在了macrotask queue中,setTimeout也放入macrotask queue。

但是,promise.then放到了另一个任务队列microtask queue中。

这两个任务队列执行顺序如下,取1个macrotask queue中的task,执行之。

然后把所有microtask queue顺序执行完,再取macrotask queue中的下一个任务。

代码开始执行时,所有这些代码在macrotask queue中,取出来执行之。

后面遇到了setTimeout,又加入到macrotask queue中,

然后,遇到了promise.then,放入到了另一个队列microtask queue。

等整个execution context stack执行完后,

下一步该取的是microtask queue中的任务了。

因此promise.then的回调比setTimeout先执行。

  • await
async function a() {
await console.log(1)
console.log(2)
} async function b() {
await a();
} b(); console.log(3)

输出: 1, 3, 2

async function a() {
await console.log(1)
console.log(2)
} async function b() {
await a();
} b(); setTimeont(function(){console.log(3)},0)

输出: 1,  2, 3

await不会造成程序阻塞,只是promise的语法糖,可以看看babel编译后async/await, 可以这么理解,async 是多个异步操作的promise对象,await相当于then,代码执行跟你用callback写的代码并没有什么区别,本质上并不是同步代码,只是让你思考代码逻辑的时候能够以同步的思维去思考,避开回调地狱,要理解异步,首先要理解cpu的工作方式,cpu执行代码的时候,一个周期是以时间片为单位,实际上,无论是php还是node,处理同一个请求,cpu需要的计算量是一样的,在同样的时间内,cpu能做的计算量是一样的,差别在于,node只是提高了cpu的利用率。从而提高了同一时间能处理的请求数量。

 
打个比方,你去银行办理业务,只有一个窗口在办理业务(一个cpu进程),假设有两个人(A和B)要办理银行卡(可理解为一次请求),方式一:A到窗口前,但这个时候要办卡的话,柜员告诉你,要你的身份证复印件(可理解为IO操作),这个时候,你去复印,柜员等待,回来后继续办理,A办理完成后,B接着同样的步骤。方式二:在A去复印身份证的时候,柜员受理B的办理请求, 等A回来后再受理A的业务。所以,很明显,方式二在同样多的时间内,一个窗口能办理的银行卡数量更多,因为这种方式充分利用了柜员等待的时间,那么方式一就是php处理请求的方式,在PHP中,处理IO操作的时候(比如,访问数据库,读取文件等),实际上cpu是处于等待状态,但其他资源此时得不到cpu的计算资源,属于资源浪费,cpu并没有接受下一个请求,而方式二,则是node处理的方式。所以综上所述,async/await 并不会影响node的并发数量,async/await是以同步的思维去写异步的代码。

promise.then, setTimeout,await执行顺序问题的更多相关文章

  1. setTimeout,promise,promise.then, async,await执行顺序问题

    今天下午看了好多关于这些执行顺序的问题  经过自己的实践 终于理解了  记录一下就拿网上出现频繁的代码来说: async function async1() { console.log('async1 ...

  2. process.nextTick,Promise.then,setTimeout,setImmediate执行顺序

    1. 同步代码执行顺序优先级高于异步代码执行顺序优先级: 2. new Promise(fn)中的fn是同步执行: 3. process.nextTick()>Promise.then()> ...

  3. async/await 执行顺序详解

    随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 ...

  4. 错误的理解引起的bug async await 执行顺序

    今天有幸好碰到一个bug,让我知道了之前我对await async 的理解有点偏差. 错误的理解 之前我一直以为  await 后面的表达式,如果是直接返回一个具体的值就不会等待,而是继续执行asyn ...

  5. async和await执行顺序

    关于执行顺序和线程ID,写了一个小程序来检测学习: using System; using System.Net; using System.Threading; using System.Threa ...

  6. for循环中嵌套setTimeout,执行顺序和结果该如何理解?

    这两天在捣鼓作用域的问题,有的时候知识这个东西真的有点像是牵一发而动全身的感觉.在理解作用域的时候,又看到了一道经典的面试题和例子题. 那就是在for循环中嵌套setTimeout延时,想想之前面试的 ...

  7. 事件循环 EventLoop(Promise,setTimeOut,async/await执行顺序)

    什么是事件循环?想要了解什么是事件循环就要从js的工作原理开始说起: JS主要的特点就是单线程,所谓单线程就是进程中只有一个线程在运行. 为什么JS是单线程的而不是多线程的呢? JS的主要用途就是与用 ...

  8. Promise嵌套问题/async await执行顺序

    /* 原则: 执行完当前promise, 会把紧挨着的then放入microtask队尾, 链后面的第二个then暂不处理分析, */ 一. new Promise((resolve, reject) ...

  9. Promise.then方法的执行顺序例题分析

    1. 当Promise对象作为resolve的参数时 const p = Promise.resolve(); const p1 = Promise.resolve(p); //就是p const p ...

随机推荐

  1. Vue01

    1.vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: 中文:https ...

  2. git代理配置

    命令行模式下配置 git config --global https.proxy https://proxyuser:proxypassword@ip/域名:port git config --glo ...

  3. update20181214 - uGetHttpData.pas

    function DecodePJItem(sText: string): TList<TDataItem>; var reg: TRegEx; mc: TMatchCollection; ...

  4. Windos下pip配置豆瓣源

    C:\Users\liche\pip 下创建pip.ini文件 pip.ini [global] index-url = http://pypi.douban.com/simple [install] ...

  5. Chrome插件:弹出桌面通知

    if (window.Notification) { var popNotice = function() { if (Notification.permission == "granted ...

  6. Director.js

    Director.js 源码 // // Generated on Tue Dec 16 2014 12:13:47 GMT+0100 (CET) by Charlie Robbins, Paolo ...

  7. mfc添加自定义事件

    1.在对话框的头文件里面添加声明函数: afx_msg void OnStnClickedPicStop(); 2.在对话框的源文件添加 BEGIN_MESSAGE_MAP(CPcEn3dTestDl ...

  8. Java中的static修饰int值做全局变量与static修饰词初始化顺序

    先看一道题 public class HasStatic{ private static int x=100; public static void main(String args[]){ HasS ...

  9. WPF之设计UI界面

    一些后面再细看的内容: Document Outline窗口有什么帮助? 1.Panel控件 为了便于组织窗口内很多的UI元素,要使用Panel控件(也称为布局管理器).Panel容纳所有的窗口UI元 ...

  10. fontFamily 'Ionicons' is not a system font and has not been loaded through Expo.Font.loadAsync的问题

    import * as React from "react";import { Provider } from "mobx-react/native";impo ...