最近写了一些异步递归的代码，着实有点头疼，索性重新研究一下JavaScript 代码执行顺序，并附上一道面试题的解析。
1. JavaScript 代码执行顺序
首先我们了解几个概念
1.1 微任务/宏任务
异步队列中包括：微任务（micro-task） 和 宏任务（macro-task）
微任务包括： process.nextTick ， Promise （ process.nextTick 为 Node 独有）
宏任务包括： script ， setTimeout ， setInterval ， setImmediate ， I/O ， UI rendering
Tips：
微任务优先级高于宏任务的前提是：同步代码已经执行完成。因为 script 属于宏任务，程序开始后会首先执行同步脚本，也就是 script 。
Promise 里边的代码属于同步代码， .then() 中执行的代码才属于异步代码。
1.2 Event Loop（事件轮询）
Event Loop 是一个程序结构，用于等待和发送消息和事件。
Event Loop 执行顺序如下所示：
setTimeout
Tips：简化讲：先执行一个宏任务（script同步代码），然后执行并清空微任务，再执行一个宏任务，然后执行并清空微任务，再执行一个宏任务，再然后执行并清空微任务......如此循环往复（一个宏任务 -> 清空微任务 -> 一个宏任务 -> 清空微任务）
2.1 题目
| setTimeout(function () { console.log(" set1"); new Promise(function (resolve) { resolve(); }).then(function () { new Promise(function (resolve) { resolve(); }).then(function () { console.log("then4"); }); console.log("then2 "); }); }); new Promise(function (resolve) { console.log("pr1"); resolve(); }).then(function () { console.log("then1"); }); setTimeout(function () { console.log("set2"); }); console.log(2); new Promise(function (resolve) { resolve(); }).then(function () { console.log("then3"); }); |
执行所有同步代码（第一次宏任务）：
| setTimeout(function () { // setTimeout 内 function 放入宏任务 console.log(" set1"); new Promise(function (resolve) { resolve(); }).then(function () { new Promise(function (resolve) { resolve(); }).then(function () { console.log("then4"); }); console.log("then2 "); }); }); new Promise(function (resolve) { console.log("pr1"); // Promise里边的代码直接执行 打印 pr1 resolve(); }).then(function () { console.log("then1"); // Promise.then 放入微任务 }); setTimeout(function () { console.log("set2"); // setTimeout内function 放入宏任务 }); console.log(2); // 打印 2 new Promise(function (resolve) { resolve(); }).then(function () { console.log("then3"); //Promise.then 放入微任务 }); // 此时控制台打印 ： pr1 > 2 // 异步任务队列：[微任务数:2][宏任务数：2] // 执行并清空微任务 |
| function () { console.log("then1"); // 输出 then1 } function () { console.log("then3"); // 输出 then3 } // 此时控制台打印 ： then1 > then3 // 异步任务：[微任务数:0][宏任务数：2] // 执行一个宏任务 |
| function () { console.log(" set1"); //打印 set1 new Promise(function (resolve) { resolve(); }).then(function () { // Promise.then 放入微任务 new Promise(function (resolve) { resolve(); }).then(function () { console.log("then4"); }); console.log("then2 "); }); } // 此时控制台打印 ： set1 // 异步任务：[微任务数:1][宏任务数：1] // 执行并清空微任务 |
| function () { new Promise(function (resolve) { resolve(); }).then(function () { console.log("then4"); // Promise.then 放入微任务 }); console.log("then2 "); // 打印 then2 } // 此时控制台打印 ： then2 // 异步任务：[微任务数:1][宏任务数：1] // 此时微任务列表增加并未清空，继续执行微任务 此时微任务列表增加并未清空，继续执行微任务 function () { console.log("then4"); // 打印 then4 } // 此时控制台打印 ： then4 // 异步任务：[微任务数:0][宏任务数：1] // 执行宏任务 |
| function () { console.log("set2"); // 打印 set2 } // 此时控制台打印 ： set2 // 异步任务：[微任务数:0][宏任务数：0] // 程序结束 |
| pr1 2 then1 then3 set1 then2 then4 set2 |
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
