详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
本文介绍了详解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。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: “科学松鼠会”微博将永久停更
下一篇: JS监听事件的叠加和移除功能
推荐阅读
-
实例详解JavaScript中setTimeout函数的执行顺序
-
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
-
详解JavaScript的任务、微任务、队列以及代码执行顺序
-
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
-
html中关于a标签的onclick以及href的执行顺序详解
-
实例详解JavaScript中setTimeout函数的执行顺序
-
promise与setTimeout的执行顺序是什么?promise函数执行顺序详解
-
promise与setTimeout的执行顺序是什么?promise函数执行顺序详解
-
html中关于a标签的onclick以及href的执行顺序详解
-
详解JavaScript的任务、微任务、队列以及代码执行顺序