详解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 this调用规则说明
Mar 08 Javascript
JavaScript 继承使用分析
May 12 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
js onclick事件传参讲解
Nov 06 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
JS中常用的消息框总结
Feb 24 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
Vue-cli打包后如何本地查看的操作
Sep 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
php join函数应用
2011/05/04 PHP
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Python中os.path用法分析
2015/01/15 Python
Python字符串格式化
2015/06/15 Python
Django数据库表反向生成实例解析
2018/02/06 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
Python中qutip用法示例详解
2020/10/02 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
咖啡书吧创业计划书
2014/01/13 职场文书
《藏戏》教学反思
2014/02/11 职场文书
表彰大会主持词
2014/03/26 职场文书
交通事故私了协议书
2014/04/16 职场文书
会议简讯范文
2015/07/20 职场文书
四群教育工作总结
2015/08/10 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python
Python入门之使用pandas分析excel数据
2021/05/12 Python
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python