详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序


Posted in Javascript onNovember 21, 2018

本文介绍了详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序,分享给大家,具体如下:

先举一个比较典型的例子:

setImmediate(function(){
  console.log(1);
},0);
setTimeout(function(){
  console.log(2);
},0);
new Promise(function(resolve){
  console.log(3);
  resolve();
  console.log(4);
}).then(function(){
  console.log(5);
});
console.log(6);
process.nextTick(function(){
  console.log(7);
});
console.log(8);

这段代码输出的正确顺序是什么?

答案是:

3 4 6 8 7 5 2 1

在解释输出结果之前,我们来看几个概念:

macro-task: script (整体代码),setTimeout, setInterval, setImmediate, I/O, UI rendering.

micro-task: process.nextTick, Promise(原生),Object.observe,MutationObserver

第一步. script整体代码被执行,执行过程为

  • 创建setImmediate macro-task
  • 创建setTimeout macro-task
  • 创建micro-task Promise.then 的回调,并执行script console.log(3); resolve(); console.log(4); 此时输出3和4,虽然resolve调用了,执行了但是整体代码还没执行完,无法进入Promise.then 流程。
  • console.log(6)输出6
  • process.nextTick 创建micro-task
  • console.log(8) 输出8
  • 第一个过程过后,已经输出了3 4 6 8

第二步. 由于其他micro-task 的 优先级高于macro-task。

此时micro-task 中有两个任务按照优先级process.nextTick 高于 Promise。

所以先输出7,再输出5

第三步,micro-task 任务列表已经执行完毕,家下来执行macro-task. 由于setTimeout的优先级高于setIImmediate,所以先输出2,再输出1。

整个过程描述起来像是同步操作,实际上是基于Event Loop的事件循环

关于micro-task和macro-task的执行顺序,可看下面这个例子(来自《深入浅出Node.js》):

//加入两个nextTick的回调函数
process.nextTick(function () {
  console.log('nextTick延迟执行1');
});
process.nextTick(function () { 
  console.log('nextTick延迟执行2');
});
// 加入两个setImmediate()的回调函数
setImmediate(function () {
  console.log('setImmediate延迟执行1'); 
  // 进入下次循环 
  process.nextTick(function () {
    console.log('强势插入');
  });
});
setImmediate(function () {
  console.log('setImmediate延迟执行2'); 
});

console.log('正常执行');

运行这段代码,结果是这样:

正常执行
nextTick延迟执行1
nextTick延迟执行2
setImmediate延迟执行1
setImmediate延迟执行2
强势插入

在新版的Node中,process.nextTick执行完后,会循环遍历setImmediate,将setImmediate都执行完毕后再跳出循环。所以两个setImmediate执行完后队列里只剩下第一个setImmediate里的process.nextTick。最后输出”强势插入”。

关于优先级的另一个比较清晰的版本:

观察者优先级

在每次轮训检查中,各观察者的优先级分别是:

idle观察者 > I/O观察者 > check观察者。

idle观察者:process.nextTick

I/O观察者:一般性的I/O回调,如网络,文件,数据库I/O等

check观察者:setTimeout>setImmediate

总结

  • 同步代码执行顺序优先级高于异步代码执行顺序优先级;
  • new Promise(fn)中的fn是同步执行;
  • process.nextTick()>Promise.then()>setTimeout>setImmediate。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 #Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 #Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 #Javascript
详解nuxt路由鉴权(express模板)
Nov 21 #Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 #Javascript
Angular刷新当前页面的实现方法
Nov 21 #Javascript
详解ES6系列之私有变量的实现
Nov 21 #Javascript
You might like
php5 and xml示例
2006/11/22 PHP
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js获取域名的方法
2015/01/27 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
Python深入学习之上下文管理器
2014/08/31 Python
简单介绍Python中的RSS处理
2015/04/13 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
python查看列的唯一值方法
2018/07/17 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python MD5加密的示例
2020/10/19 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
员工工作表现评语
2014/04/26 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
计划生育证明格式范本
2014/09/12 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书