工商企业信息查询公示系统_美御品牌推广_云搜索下载_做网页设计的软件

文章目录

1 原理图
2 说明
3 相关面试题
- 3.1 面试题1
- 3.2 面试题2
- 3.3 面试题3
- 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()'); //后1Promise.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(() => { //放入宏队列 4console.log(1);}, 0)Promise.resolve().then(() => { //放入微队列 2console.log(2);})Promise.resolve().then(() => { //放入微队列 3console.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执行后放4console.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 undefinedconsole.log("2");new Promise((resolve, reject) => {console.log("3"); //3resolve();}).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>

工商企业信息查询公示系统_美御品牌推广_云搜索下载_做网页设计的软件

文章目录

1 原理图

2 说明

3 相关面试题

3.1 面试题1

3.2 面试题2

3.3 面试题3

3.4 面试题4

最新新闻

热搜词