Promise, setTimeout 和 Event Loop

下面的代码段,为什么输出结果是1,2,3,5,4而非1,2,3,4,5?
(function test() {
setTimeout(function() {console.log(4)}, 0);
new Promise(function executor(resolve) {
console.log(1);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(2);
}).then(function() {
console.log(5);
});
console.log(3);
})()

因为event loop中有多个task 队列,到底有多少个,每个浏览器的实现不同, 其中micro-task队列存放高优先级的任务, macro-task队列存放普通优先级的任务。
* setTimeout 给macro-task队列中添加了一个任务4。
* 创建Promise实例(executor)是同步执行的, 它直接输出1和2
* Promise.then是异步执行的。 其中的resolve, 只是把then的任务,i.e.任务5, 添加micro-task队列中。
* micro-task队列具有高优先级, 所以, 在3之后, 先执行micro-task中的任务5
* 然后是低优先级的macro-task队列中的任务4

https://github.com/creeperyang/blog/issues/21

Promise事件比timeout优先的更多相关文章

  1. es6 Promise 事件机制分析

    最近在学习es6的Promise,其中涉及到了Promsie的事件执行机制,因此总结了关于Promise的执行机制,若有错误,欢迎纠错和讨论. 在阮一峰老师的书中<es6 标准入门>对Pr ...

  2. nodejs事件和事件循环简介

    目录 简介 事件 事件循环 事件循环的阻塞 事件循环举例 栈和消息队列 作业队列和promise process.nextTick() setImmediate() setInterval() 简介 ...

  3. Promise的前世今生和妙用技巧

    浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...

  4. angularjs 中的setTimeout(),setInterval() / $interval 和 $timeout

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后 ...

  5. 说说Angular中的$timeOut定时器

     非常不幸的一点是,人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的.无须在意的函数.但是,如果你忘记了$timeOut()的回调函数将会造成非常不好的影响,你可能会因此遇 ...

  6. AngularJs $interval 和 $timeout

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后 ...

  7. javascript中的promise和deferred:实践(二)

    javascript中的promise和deferred:实践(二) 介绍: 在第一节呢,我花了大量的时间来介绍promises和deferreds的理论.现在呢,我们来看看jquery中的promi ...

  8. Angular - - $interval 和 $timeout

    $interval window.setInterval的Angular包装形式.Fn是每次延迟时间后被执行的函数. 间隔函数的返回值是一个承诺.这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后 ...

  9. Promise小书(长文)

    promise基础 Promise是异步编程的一种解决方案.ES6 Promise的规范来源于Promises/A+社区,它有很多版本的实现. Promise比传统的解决方案(回调函数和事件)更合理和 ...

随机推荐

  1. Spring Developer Tools 源码分析:二、类路径监控

    在 Spring Developer Tools 源码分析一中介绍了 devtools 提供的文件监控实现,在第二部分中,我们将会使用第一部分提供的目录监控功能,实现对开发环境中 classpath ...

  2. haxe相关的计划安排

    用多少写多少.先从入门开始,再到怎么写DSL解析器.最后自举(只是做个示范而已 在深入haxe的过程中,多少会跟typescript有交集,这些会边走边总结. 因为只是for example,所以这个 ...

  3. C#语句从MySQL中简单的读取数据库信息

    protected void Page_Load(object sender, EventArgs e) { //数据库+Json MyJson.JsonNode_Object json = new ...

  4. day37-多进程多线程二-锁

    Lock组件 当我们用多进程来读写文件的时候,如果一个进程是写文件,一个进程是读文件,如果两个文件同时进行,肯定是不行的,必须是文件写结束以后,才可以进行读操作.或者是多个进程在共享一些资源的时候,同 ...

  5. 简单易懂的 Vue.js 基础知识 !

    根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold  <!-- 这是我们的 View - ...

  6. LeetCode 695 岛屿的最大面积

    题目: 给定一个包含了一些 0 和 1的非空二维数组 grid , 一个 岛屿 是由四个方向 (水平或垂直) 的 1 (代表土地) 构成的组合.你可以假设二维矩阵的四个边缘都被水包围着. 找到给定的二 ...

  7. latex中使用listings显示代码

    \documentclass[12pt,a4paper]{article}\usepackage{ctex}\usepackage{listings}\usepackage{xcolor}\begin ...

  8. idea设置代码块

    转:https://blog.csdn.net/boy_Kenny/article/details/55223078?utm_source=blogxgwz4 idea设置代码块 1.代码模板场景介绍 ...

  9. 源代码安装-非ROOT用户安装软件的方法

    0.    前言 如果你没有sudo权限,则很多程序是无法使用别人编译好的文件安装的. 还有时候,没有对应你的主机配置的安装包,这时候需要我们自己下载最原始的源代码,然后进行编译安装. 这样安装的程序 ...

  10. STL:unique()函数

    unique() unique()是剔除重复他是剔除相邻之间字符重复的,倘若其中中的字符前后之间是没有重复的,unique函数是起不到作用的,所以使用以前都会sort处理. unique()函数的返回 ...