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

转载自https://segmentfault.com/a/1190000008595101

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

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

下面这个例子比较典型:

setImmediate(function(){console.log(1);},0);setTimeout(function(){console.log(2);},0);newPromise(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延迟执行1nextTick延迟执行2setImmediate延迟执行1强势插入setImmediate延迟执行2

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

正常执行nextTick延迟执行1nextTick延迟执行2setImmediate延迟执行1setImmediate延迟执行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还先输出??

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

vart1 = +newDate();setImmediate(function(){console.log('1'); });setTimeout(function(){console.log('2'); },20);console.log('3');vart2 = +newDate();console.log('time: '+ (t2 - t1));//输出3time:2321

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

vart1 = +newDate();setImmediate(function(){console.log('1'); });setTimeout(function(){console.log('2'); },30);console.log('3');vart2 = +newDate();console.log('time: '+ (t2 - t1));//输出3time:2312

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...

3月7日发布

更多

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容