js 使用 async和await，简单的写setTimeout

最新推荐文章于 2025-02-25 16:32:58 发布

龙中舞王

最新推荐文章于 2025-02-25 16:32:58 发布

阅读量1.4k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_44695769/article/details/130682701

版权

文章介绍了如何使用JavaScript的async和await功能来避免回调函数的嵌套，通过创建Promise实现延迟打印控制台的有序操作。示例代码展示了正确和错误的使用方式，以及不恰当的实现可能导致的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

需求：延迟3s,2s,1s打印控制台：3,2,1，并且要求等待前面执行完之后才能执行后面的。因为延迟时间递减，
所以如果打印3,2,1就肯定是等于上一步完成后进行下一步。
如果是打印1,2,3。说明并没有等待

如果不使用async await，setTimeout会变成回调地狱

setTimeout(() => {
	console.log(`等待3s`)
	setTimeout(() => {
		console.log(`等待2s`)
		setTimeout(() => {
			console.log(`等待1s`)
		}, second * 1000)
	}, second * 1000)
}, second * 1000)

使用 async和await改造

async function TimeSpeak(second) {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log(`等待${second}s`)
			resolve('')
		}, second * 1000)
	
	})
}
async function TimeTest() {
	await TimeSpeak(3)
	await TimeSpeak(2)
	await TimeSpeak(1)
}
TimeTest()

结果：按顺序打印3,2,1

错误写法：

async function TimeSpeak(second) {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log(`等待${second}s`)
			- resolve('')
		}, second * 1000)
		+ resolve('')
	})
}
async function TimeTest() {
	await TimeSpeak(3)
	await TimeSpeak(2)
	await TimeSpeak(1)
}
TimeTest()

打印1,2,3

async function TimeSpeak(second) {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log(`等待${second}s`)
			- resolve('')
		}, second * 1000)
	
	})
}
async function TimeTest() {
	await TimeSpeak(3)
	await TimeSpeak(2)
	await TimeSpeak(1)
}
TimeTest()

打印"3"之后锁死线程

async function TimeSpeak(second) {
	setTimeout(() => {
		console.log(`等待${second}s`)
	}, second * 1000)
	return new Promise(resolve => {
		resolve('')
	})
}
async function TimeTest() {
	await TimeSpeak(3)
	await TimeSpeak(2)
	await TimeSpeak(1)
}
TimeTest()

打印1,2,3