JavaScript 实现红绿灯

最新推荐文章于 2024-02-10 18:42:53 发布

latency_cheng

最新推荐文章于 2024-02-10 18:42:53 发布

阅读量9.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： JavaScript 异步红绿灯 Promise async

本文链接：https://blog.youkuaiyun.com/latency_cheng/article/details/88660742

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了使用JavaScript的setTimeout、Promise和async/await三种方法实现红绿灯效果，红灯2秒，黄灯1秒，绿灯3秒，通过循环改变颜色。在setTimeout中借助递归，Promise中利用then链式调用，async/await则通过while循环配合await来简化代码结构。

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

使用setTimeout、Promise、async await 三种方式实现红绿灯代码，红灯2秒，黄灯1秒，绿灯3秒，循环改变颜色。改变颜色的方法，就简单写成打印出颜色。

setTimeout实现

使用setTimeout是最基本的实现方式，代码如下，使用递归来实现循环改变颜色。

function changeColor(color) {
	console.log('traffic-light ', color);
}
function main() {
	changeColor('red');
	setTimeout(()=>{
		changeColor('yellow');
		setTimeout(() => {
			changeColor('green');
			setTimeout(main, 2000);
		}, 1000);
	}, 2000);
}
main();

Promise 实现

使用Promise，把下一次的颜色改变写在then里面，最后同样使用递归完成循环。

function sleep(duration){
    return new Promise(resolve => {
        setTimeout(resolve, duration);
    })
}
function changeColor(duration,color){
    return new Promise(resolve => {
		console.log('traffic-light ', color);
    	sleep(duration).then(resolve);
	})
}
function main() {
	return new Promise(resolve => {
		changeColor(2000, 'red').then(() => {
			changeColor(1000, 'yellow').then(() => {
				changeColor(3000, 'green').then(() => {
					main();
				})
			})
		})
	})
}
main();

async await 实现

使用async await就可以避免Promise的一连串.then.then.then，也不再需要递归，使用while就可以实现循环。

function sleep(duration) {
	return new Promise(resolve => {
		setTimeout(resolve, duration);
	})
}
async function changeColor(color, duration) {
	console.log('traffic-light ', color);
	await sleep(duration);
}
async function main() {
	while (true) {
		await changeColor('red', 2000);
		await changeColor('yellow', 1000);
		await changeColor('green', 3000);
	}
}
main();