红绿灯效果：JS中如何实现红绿灯效果，方法是什么

JS中如何实现红绿灯效果?红绿灯是我们日常很常见的，红绿灯效果就是红灯、黄灯和绿灯循环改延时的效果，那么我们用JavaScript怎样做这样的效果呢？文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

本教程操作环境：windows7系统、javascript1.8.5版本、Dell G3电脑。

JavaScript 实现红绿灯

国外云服务器使用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();

以上就是JS中如何实现红绿灯效果介绍，上述示例具有一定的参考价值，有需要的朋友可以了解看看，希望对大家学习JavaScript有帮助，想要了解更多可以继续浏览本公司其他相关的文章。

YINGSOO曾被评为IDC行业优选服务商，是一家专业提供香港服务器、香港云服务器、香港高防服务器租用、美国服务器、美国云服务器等境外服务器租用托管服务的IDC厂商。全国统一服务热线：400-630-3752

热搜词条：【机柜数据中心】【服务器端口】【服务商服务器】【服务器网关】【端口关闭】【运营小红】【操作代码】【游戏服务器】【网站恶意】【邮件附件】【查询语句】【注册账户】【服务器自己的】【服务器用户】【矩形绘制】【如图端口】【国外网站】【网游服务器】【用户功能】【服务器租用】【信息命令行】【服务器配置】【自己的每个人】【口令木马】【删除会员】【函数这是】【提取中文】【后台提交】【变量匹配】【文件删除】