详解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 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
jQuery拖拽 & 弹出层 介绍与示例
Dec 27 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
仓库管理制度
2014/01/21 职场文书
青年教师培训方案
2014/02/06 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
运动会方队口号
2014/06/07 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
2014年消防工作总结
2014/11/21 职场文书
2015年国培研修感言
2015/08/01 职场文书
小学班级管理心得体会
2016/01/07 职场文书
javascript对象3个属性特征
2021/11/17 Javascript
python井字棋游戏实现人机对战
2022/04/28 Python