前端碎碎念 之 nextTick, setTimeout 以及 setImmediate 三者的执行顺序

news/2024/7/17 14:24:55

『前端碎碎念』系列会记录我平时看书或者看文章遇到的问题,一般都是比较基础但是容易遗忘的知识点,你也可能会在面试中碰到。 我会查阅一些资料并可能加上自己的理解,来记录这些问题。更多文章请前往我的个人博客

这个问题是有关执行顺序和Event Loop的。关于Event Loop和任务队列等概念,可以先阅读我引用中的文章,本文主要分析一些存在的疑惑点。

下面这个例子比较典型:

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整体代码,micro-task的任务优先级高于macro-task的任务优先级。
其中,script(整体代码) ,可以理解为待执行的所有代码。

所以执行顺序如下:

第一步. 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

process.nextTick在两个setImmediate之间强行插入了。
但运行这段代码发现结果却是这样:

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

朴老师写那本书的时候,node最新版本为0.10.13,而我的版本是6.x

老版本的Node会优先执行process.nextTick。
当process.nextTick队列执行完后再执行一个setImmediate任务。然后再次回到新的事件循环。所以执行完第一个setImmediate后,队列里只剩下第一个setImmediate里的process.nextTick和第二个setImmediate。所以process.nextTick会先执行。

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

具体实现可参考Node.js源码。

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

观察者优先级

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

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

idle观察者:process.nextTick

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

check观察者:setImmediate,setTimeout

setImmediate 和 setTimeout 的优先级

看下面这个例子:

setImmediate(function () {console.log('1'); 
});
setTimeout(function () {console.log('2'); 
}, 0);console.log('3');//输出结果是3 2 1

我们知道现在HTML5规定setTimeout的最小间隔时间是4ms,也就是说0实际上也会别默认设置为最小值4ms。我们把这个延迟加大

上面说到setTimeout 的优先级比 setImmediate的高,其实这种说法是有条件的。

再看下面这个例子,为setTimeout增加了一个延迟20ms的时间:

setImmediate(function () {console.log('1'); 
});
setTimeout(function () {console.log('2'); 
}, 20);console.log('3');//输出结果是3 2 1

setTimeout延迟20ms再执行,而setImmediate是立即执行,竟然2比1还先输出??

试试打印出这个程序的执行时间:

var t1 = +new Date();
setImmediate(function () {console.log('1'); 
});
setTimeout(function () {console.log('2'); 
},20);console.log('3');
var t2 = +new Date();
console.log('time: ' + (t2 - t1));
//输出
3 
time: 23 
2 
1

程序执行用了23ms, 也就是说,在script(整体代码)执行完之前,setTimeout已经过时了,所以当进入macro-task的时候setTimeout依然优先于setImmediate执行。如果我们把这个值调大一点呢?

var t1 = +new Date();
setImmediate(function () {console.log('1'); 
});
setTimeout(function () {console.log('2'); 
},30);console.log('3');
var t2 = +new Date();
console.log('time: ' + (t2 - t1));
//输出
3 
time: 23 
1 
2

setImmediate早于setTimeout执行了,因为进入macro-task 循环的时候,setTimeout的定时器还没到。

以上实验是基于6.6.0版本Node.js测试,实际上在碰到类似这种问题的时候,最好的办法是参考标准,并查阅源码,不能死记概念和顺序,因为标准也是会变的。包括此文也是自学总结,经供参考。

参考:
https://www.zhihu.com/questio...
https://segmentfault.com/a/11...
http://www.jianshu.com/p/837b...


http://lihuaxi.xjx100.cn/news/241360.html

相关文章

下java7 64有什么用_Win 7 64位系统安装java 8,看完就明白了

在 Windows 7 的 64 位系统中安装 jdk 8工具/材料Windows 7 64 位系统JDK 8 64位版本方法/步骤1 下载JDK 8安装文件011.1 访问JDK下载地址http://www.oracle.com/technetwork/java/javase/downloads/index.html点击 JDK Download 按钮,进入JDK下载页。021.2 下载JDK…

1025 PAT Ranking

1. 考生的编号是数字字符串,但是没必要转化成整数再比较,可以直接用strcmp() 2. 对整体的排名进行编号时所有信息都已经齐备,可以边编号边输出 3. 需要有些思量的地方是部分编号,当当前学生的分数不等于他上一个该怎么办 4. 真…

上行短信/下行短信

这今天接触到短信上行和下行一些名词,很是糊涂啊。网络上相关资料如下。 从手机发起一个的过程叫上行(MO),到手机结束的过程叫下行(MT)。比如,平时给你的朋友发送一条短信,对你来说就是上行(MO),而对你的朋友来说&…

RHEL6.3安装vsftpd

1、下载vsftpd,可以从官网(http://vsftpd.beasts.org)下载,也可以百度搜索[rootlocalhost vsftpd]# wget http://down1.chinaunix.net/distfiles/vsftpd-3.0.2.tar.gz2、解压压缩包并进入解压出来的目录[rootlocalhost vsftpd]# t…

1062 Talent and Virtue

1.在结构体里面设置total_grades属性是明智之举,但是不可以在结构体内得到total_gradesvirtue_gradetalent_grade; 2.弄清题意,对人进行分类,等级越高type值越小,但是注意分的类别也许出现交叉的情况,细的要出现在粗的…

【转】Windows 64bit下Python环境配置与集成IDE PyCharm

本篇博客主要讲述Windows下Python环境的搭建(十分感谢原作者!!)1. Python基本环境安装: 在网站Python官网 中下载Windows版本的Python安装包,双击下载下来的安装包,安装过程中要选中pip和Add py…

antd+dva笔记

参考 React中函数式声明组件Dva Ant Design 前后端分离之 React 应用实践ReactDvaJS 之 hook 路由权限控制dva 知识地图react-router Guides and API docs (v2, v3)react-sage redux-saga 是一个用于管理 Redux 应用异步操作,可以用来代替 redux-thunk 中间件。《Redux-saga 中…

java for 两个条件_for循环条件里定义2个变量为什么会报错

public class HelloWorld {//完成 main 方法public static void main(String[] args) {int scores[]{89,-23,64,91,119,52,73};HelloWorld hellonew HelloWorld();hello.sortScore(scores);}//定义方法完成成绩排序并输出前三名的功能public void sortScore(int[] scores){Arra…