JavaScript 实现红绿灯

墨蓝 2022-03-02 01:28 169阅读 0赞

使用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();

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 js -制作红绿灯倒计时

1、html内容： <body> <div class="box">  <d

电玩女神/ 2023年01月04日 10:29/ 0 赞/ 114 阅读

相关模拟实现红绿灯

模拟实现红绿灯模拟实现红绿灯模拟实现红绿灯利用HTML+CSS+JS实现红绿灯效果： ![在这里插入图片描述][202105172217393

太过爱你忘了你带给我的痛/ 2022年10月20日 12:15/ 0 赞/ 130 阅读

相关红绿灯的html代码,红绿灯.html

红绿灯倒计时 .box\{width:250px;height:52px;padding:15px 30px;border:2px solid \ccc;border-rad

淡淡的烟草味﹌/ 2022年08月30日 13:55/ 0 赞/ 196 阅读

相关激励的红绿灯

2004年4月，盛大网络上上下下都在为纳斯达克上市忙碌着，其新任总裁唐骏更是马不停蹄地出现在各种场合。而辛勤工作的背后，是陈天桥给予唐骏的股权激励。后者手握的260万股期权只有

以你之姓@/ 2022年08月27日 07:52/ 0 赞/ 140 阅读

相关红绿灯简单模拟

红绿灯简单模拟子文件 <!DOCTYPE html> <html> <head lang="en"> <meta char

谁践踏了优雅/ 2022年06月14日 09:49/ 0 赞/ 129 阅读

相关状态模式——详解红绿灯问题

状态模式——详解红绿灯问题状态模式的定义是这样的：允许对象在内部状态改变时改变它的行为，对象看起来好像修改了它的类。下面做一个简答的解释，就是说当对象

小鱼儿/ 2022年06月13日 12:24/ 0 赞/ 204 阅读

相关红绿灯

今天给大家分享一个很简单有趣的红绿灯演示动画，效果图如下：乍一看你可能会觉得纯CSS动画可能做不到，实际上知道了原理还是比较简单的。首先这里有3盏灯，我们为每一盏灯写了

╰+攻爆jí腚メ/ 2022年03月15日 10:08/ 0 赞/ 170 阅读

相关 JavaScript 实现红绿灯

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

墨蓝/ 2022年03月02日 01:28/ 0 赞/ 170 阅读

相关 promise 实现红绿灯

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

ゞ浴缸里的玫瑰/ 2022年01月09日 04:49/ 0 赞/ 202 阅读

相关红绿灯设计的个人想法

现在的红绿灯行车规范个人觉得太复杂，判断时间长，不利于交通安全所以有一些红绿灯规则的想法 1 单直行![20210512162319193.png][] 通过![2

曾经终败给现在/ 2021年09月25日 08:50/ 0 赞/ 224 阅读