文章目录
- [1 原理图](#1 原理图)
- [2 说明](#2 说明)
- [3 相关面试题](#3 相关面试题)
-
- [3.1 面试题1](#3.1 面试题1)
- [3.2 面试题2](#3.2 面试题2)
- [3.3 面试题3](#3.3 面试题3)
- [3.4 面试题4](#3.4 面试题4)
1 原理图
2 说明
- JS 中用来存储待执行回调函数的队列包含 2 个不同特定的队列：宏队列和微队列。
- 宏队列：用来保存待执行的宏任务(回调)，比如：定时器回调 / DOM事件回调 / ajax 回调。
- 微队列：用来保存待执行的微任务(回调)，比如：promise的回调 / MutationObserver的回调。
- JS 执行时会区别这 2 个队列：
- JS 引擎首先必须先执行所有的初始化同步任务代码。
- 每次准备取出第一个宏任务执行前，都要将所有的微任务一个一个取出来执行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>10_宏队列与微队列</title>
</head>
<body>
<script>
setTimeout(() => { //会立即放入宏队列
console.log('timeout callback1()'); //后1
Promise.resolve(3).then(
value => { //会立即放入微队列
//每次取出宏任务前需要把所有的微任务处理掉
console.log('Promise onResolved3()', value); //timeout callback2()之前
}
)
}, 0);
setTimeout(() => { //会立即放入宏队列
console.log('timeout callback2()'); //后2
}, 0);
Promise.resolve(1).then(
value => { //会立即放入微队列
console.log('Promise onResolved1()', value); //先1
}
)
Promise.resolve(1).then(
value => { //会立即放入微队列
console.log('Promise onResolved2()', value); //先2
}
)
</script>
</body>
</html>
3 相关面试题
3.1 面试题1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_Promise相关面试题1</title>
</head>
<body>
<script type="text/javascript">
setTimeout(() => { //放入宏队列 4
console.log(1);
}, 0)
Promise.resolve().then(() => { //放入微队列 2
console.log(2);
})
Promise.resolve().then(() => { //放入微队列 3
console.log(4);
})
console.log(3); //同步代码 1
//输出：3 2 4 1
</script>
</body>
</html>
3.2 面试题2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_Promise相关面试题2</title>
</head>
<body>
<script type="text/javascript">
setTimeout(() => { //放入宏队列
console.log(1);
}, 0)
new Promise((resolve) => {
console.log(2); //同步执行
resolve();
}).then(() => { //放入微队列
console.log(3);
}).then(() => { //上面是pending状态，将此回调函数先存在callbacks中，3执行后放4
console.log(4);
})
console.log(5); //同步执行
//输出：2 5 3 4 1
/**
* 宏: [1]
* []
* 微: [3]
* [4]
* []
*/
</script>
</body>
</html>
3.3 面试题3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_Promise相关面试题3</title>
</head>
<body>
<script type="text/javascript">
const first = () => (new Promise((resolve, reject) => {
console.log(3); //同步
let p = new Promise((resolve, reject) => {
console.log(7); //同步
setTimeout(() => { //放入宏队列
console.log(5);
resolve(6);
}, 0)
resolve(1); //p成功
})
resolve(2); //first()成功
p.then((arg) => { //放入微队列
console.log(arg); //1
})
}))
first().then((arg) => { //放入微队列
console.log(arg); //2
})
console.log(4); //同步
//3 7 4 1 2 5
/**
* 宏: [5]
* 微: [1, 2]
*/
</script>
</body>
</html>
3.4 面试题4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_Promise相关面试题4</title>
</head>
<body>
<script type="text/javascript">
setTimeout(() => { //放入宏队列
console.log("0");
}, 0)
new Promise((resolve, reject) => {
console.log("1"); //立刻执行
resolve();
}).then(() => { //放入微队列 return undefined
console.log("2");
new Promise((resolve, reject) => {
console.log("3"); //3
resolve();
}).then(() => { //放入微队列
console.log("4");
}).then(() => { //.then()执行，内部缓存回调函数，然后外层.then()执行完毕
console.log("5");
})
}).then(() => { //放入微队列
console.log("6");
})
new Promise((resolve, reject) => {
console.log("7");
resolve();
}).then(() => { //放入微队列
console.log("8");
})
//1 7 2 3 8 4 6 5 0
/**
* 宏: [0]
* []
* 微: [2对应的回调函数, 8]
* [8, 4, 6]
* [4, 6]
* [6, 5]
* [5]
* []
*/
</script>
</body>
</html>