Promise、事件循环试题一
写出下面代码的执行顺序:
setTimeout(function () {
console.log("setTimeout1");
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("promise1");
resolve();
}).then(function () {
console.log("then1");
});
setTimeout(function () {
console.log("setTimeout2");
});
console.log(2);
queueMicrotask(() => {
console.log("queueMicrotask1")
});
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then3");
});
分析:
- 初次执行会打印下面的全局代码
// 全局代码打印
// promise1
// 2
- 并将对应的异步放入对应的宏任务队列和微任务队列
// 宏任务队列的函数
// 1.第一个函数
setTimeout(function () {
console.log("setTimeout1");
new Promise(function (resolve) {
resolve();
}).then(function () {
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then4");
});
console.log("then2");
});
});
// 2.第二个函数
setTimeout(function () {
console.log("setTimeout2");
});
// 微任务队列的函数
// 1.第一个函数 下面这个Promise中的then方法的回调
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("then1");
});
// 2.queueMicrotask函数
queueMicrotask(() => {
console.log("queueMicrotask1")
});
// 3.第三个函数 下面这个Promise中的then方法的回调
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then3");
});
- 全局代码执行完后, 会按照顺序执行微任务队列
// 全局代码打印
// promise1
// 2
// 微任务队列第一次打印
// then1
// queueMicrotask1
// then3
- 当微任务队列中全部执行完成时, 就会按照顺序执行宏任务队列
// 全局代码打印
// promise1
// 2
// 微任务队列第一次打印
// then1
// queueMicrotask1
// then3
// 宏任务队列第一次打印
// setTimeout1
// then2
- 当执行到宏任务队列的第一个函数, 发现有Promise的then方法, 又会将then方法的回调放入, 此时宏任务和微任务中函数分别如下
// 宏任务队列的函数
// 1.第一个函数
setTimeout(function () {
console.log("setTimeout2");
});
// 微任务队列的函数
// 1.第一个函数
function () {
new Promise(function (resolve) {
resolve();
}
// 2.第二个函数
function () {
console.log("then4");
}
- 当执行完宏任务队列中第一个函数, 会发现微队列中又添加了新的成员, 便会暂停执行宏任务队列, 继续执行微任务队列
// 全局代码打印
// promise1
// 2
// 微任务队列第一次打印
// then1
// queueMicrotask1
// then3
// 宏任务队列第一次打印
// setTimeout1
// then2
// 微任务队列第二次打印
// then4
- 微任务队列再次为空之后, 再执行宏任务队列就是最终打印顺序
// 全局代码打印
// promise1
// 2
// 微任务队列第一次打印
// then1
// queueMicrotask1
// then3
// 宏任务队列第一次打印
// setTimeout1
// then2
// 微任务队列第二次打印
// then4
// 宏任务队列第二次打印
// setTimeout2
Promise、事件循环试题二
同样写出下面代码的打印顺序, 思路和上面一样
async function async1 () {
console.log('async1 start')
await async2();
console.log('async1 end')
}
async function async2 () {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('setTimeout')
}, 0)
async1();
new Promise (function (resolve) {
console.log('promise1')
resolve();
}).then (function () {
console.log('promise2')
})
console.log('script end')
这里直接给出答案
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/120124.html
