详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序

 更新时间:2018年11月21日 11:45:23   作者:舞阳侯  
这篇文章主要介绍了详解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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript简介

    JavaScript简介

    这篇文章主要介绍了JavaScript简介,都是非常基础的内容,有需要的小伙伴参考下吧。
    2015-02-02
  • JavaScript中的原始值和复杂值

    JavaScript中的原始值和复杂值

    这篇文章主要介绍了JavaScript中的原始值和复杂值 的相关资料,需要的朋友可以参考下
    2016-01-01
  • js原生日历的实例(推荐)

    js原生日历的实例(推荐)

    下面小编就为大家带来一篇js原生日历的实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • bootstrap组件之按钮式下拉菜单小结

    bootstrap组件之按钮式下拉菜单小结

    这篇文章主要介绍了bootstrap组件之按钮式下拉菜单,包括单按钮下拉菜单,分裂式下拉菜单和向上弹出式菜单,本文给大家介绍的非常详细,需要的朋友参考下吧
    2017-01-01
  • JavaScript动态生成二维码图片

    JavaScript动态生成二维码图片

    本文给大家介绍js动态生成二维码图片的相关内容,感兴趣的朋友一起学习吧
    2016-04-04
  • H5唤醒APP实现方法及注意点总结

    H5唤醒APP实现方法及注意点总结

    目前通过H5页面唤起App的场景十分常见,比如常见的分享功能,这篇文章主要给大家介绍了关于H5唤醒APP实现方法及注意点的相关资料,需要的朋友可以参考下
    2021-06-06
  • ES6入门教程之let、const的使用方法

    ES6入门教程之let、const的使用方法

    这篇文章主要给大家介绍了关于ES6入门教程之let、const使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ES6具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • js 弹出新页面避免被浏览器、ad拦截的一种新方法

    js 弹出新页面避免被浏览器、ad拦截的一种新方法

    本文为大家介绍了使用js弹出新页面同时避免被浏览器、ad拦截等,具体的实现方法如下,大家不妨参考参考
    2014-04-04
  • 基于JavaScript实现评论框展开和隐藏功能

    基于JavaScript实现评论框展开和隐藏功能

    本文通过实例代码给大家介绍了基于JavaScript实现评论框展开和隐藏功能,感兴趣的朋友参考下吧
    2017-08-08
  • 详细分析单线程JS执行问题

    详细分析单线程JS执行问题

    给大家详细讲解一下单线程javascript的执行问题,以及通过实例分析用法。
    2017-11-11

最新评论