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
【面试题】async/await、promise和setTimeout的执行顺序
【面试题】async/await、promise和setTimeout的执行顺序
193 0
|
11月前
|
前端开发 JavaScript
setTimeout、Promise、Async/Await 的区别
`setTimeout` 是用于延迟执行函数的简单方法;`Promise` 表示异步操作的最终完成或失败;`Async/Await` 是基于 Promise 的语法糖,使异步代码更易读和维护。三者都用于处理异步操作,但使用场景和语法有所不同。
|
前端开发 JavaScript API
重学前端 17 # Promise里的代码为什么比setTimeout先执行?
重学前端 17 # Promise里的代码为什么比setTimeout先执行?
164 0
重学前端 17 # Promise里的代码为什么比setTimeout先执行?
|
前端开发 JavaScript
setTimeout、Promise、 Async/Await 的区别
setTimeout、Promise、 Async/Await 的区别
304 0
setTimeout、Promise、 Async/Await 的区别
|
前端开发 JavaScript 调度
前端进阶|第四天从setTimeout、Promise看js 的异步机制
前端进阶第四天 从setTimeout、Promise看js 的异步机制 每天一个前端知识点
1039 0
|
1月前
|
前端开发 JavaScript API
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
在前端开发中,异步编程至关重要。本文详解了同步与异步的区别,通过生活化例子帮助理解。深入讲解了 Promise 的概念、状态及链式调用,并引入 async/await 这一语法糖,使异步代码更清晰易读。还介绍了多个异步任务的组合处理方式,如 Promise.all 与 Promise.race。掌握这些内容,将大幅提升你的异步编程能力,写出更优雅、易维护的代码,助力开发与面试!
162 0
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
|
1月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
369 204
|
10月前
|
前端开发 JavaScript 开发者
Async 和 Await 是基于 Promise 实现
【10月更文挑战第30天】Async和Await是基于Promise实现的语法糖,它们通过简洁的语法形式,借助Promise的异步处理机制,为JavaScript开发者提供了一种更优雅、更易于理解和维护的异步编程方式。
202 1
|
7月前
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
330 57