Promise面试题

最新推荐文章于 2024-08-16 12:01:24 发布

zzzzzaaq

最新推荐文章于 2024-08-16 12:01:24 发布

阅读量136

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/zzzzzaaq/article/details/130248252

版权

本文详细阐述了JavaScript中的事件循环机制，特别是宏任务和微任务的执行顺序。在给定的代码示例中，解释了async函数、setTimeout、Promise及resolve、then如何影响任务队列的处理，展示了128914、101112、413及最后的5和67的输出顺序。

摘要由CSDN通过智能技术生成

1.先看到底是宏任务还是微任务，setTimeout是宏任务，Promise和async是微任务，微任务先执行，所以先会直接fn()方法，然后输出1，然后输出2，遇到await，后面的东西会丢到宏任务中，所以会执行下面的Prmoise，输出8和9然后遇到reslove，后面的丢入宏任务，如果没有reslove，则后面的then方法不会执行，然后最后执行14

2.第一轮的微任务执行完结果为 1 2 8 9 14 ，开始继续执行，再次进入fn()方法输出3，遇到await，后面的放入宏任务，然后执行Promise的then方法，一次输出10，11，12

3.然后再次执行最后的.then方法输出 4 13 ，剩下的setTimeout最后执行，因为第二个时间为1000毫秒所以先执行，输出6 7 ，最后输出5

async function fn() {
			console.log(1);
			await console.log(2);
			await console.log(3);
			console.log(4)
		}
		setTimeout(() => {
			console.log(5);
		}, 2000)
		setTimeout(() => {
			new Promise(resolve => {
				console.log(6);
				resolve()
			}).then(() => {
				console.log(7)
			})
		}, 1000)
		fn()
		new Promise(resolve => {
			console.log(8);
			new Promise(resolve => {
				console.log(9);
				resolve()
			}).then(() => {
				console.log(10);
			})
			resolve()
		}).then(() => {
			console.log(11);
			new Promise(resolve => {
				console.log(12);
				resolve()
			}).then(() => {
				console.log(13);
			})
		})
		console.log(14)