最近写了一些异步递归的代码,着实有点头疼,索性重新研究一下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. 面试题详解
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),我们将立即处理。