Promise函数执行顺序(promise settimeout和普通函数的执行顺序)
Promise函数执行顺序是在面试中经常会碰到的一个问题, 现在把主要思路记录一下:
要点是: 首先执行同步代码, promise()
构造函数中的代码是同步代码, .then
和.catch
里的是异步代码.
执行顺序: 已申明的函数-->new Promise-->setTimeout;在Promise函数中后执行.then()函数;
testFunction() { console.log(`console 1`); setTimeout(() => { new Promise(() => { console.log(`console 10`); }).then(console.log(`console 11`)); },0); new Promise((resolve, reject) => { console.log(`console 2`); resolve(console.log(`console 3`)); reject(console.log(`console 4`)) }).then(() => { setTimeout(() => { console.log(`console 7`); new Promise(() => { console.log(`console 8`) }).then(console.log(`console 9`)) },0) }).catch(() => { console.log(`consolve 5`) }); console.log(`console 6`) }//-->console 1;console 2;console 3;console 4;console 6;console 10;console 11;console 7;console 8;console 9 复制代码
例题
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。
作者:Charonmomo
链接:https://juejin.cn/post/7031070085473599525