javascript实现红绿灯的方法：1、使用setTimeout和递归来实现循环改变颜色；2、使用Promise，并把下一次的颜色改变写在then里面；3、使用async await和while实现红绿灯效果。
JavaScript 实现红绿灯
使用setTimeout、Promise、async await 三种方式实现红绿灯代码，红灯2秒，黄灯1秒，绿灯3秒，循环改变颜色。改变颜色的方法，就简单写成打印出颜色。
setTimeout实现
使用setTimeout是最基本的实现方式，代码如下，使用递归来实现循环改变颜色。
functionchangeColor(color){console.log('traffic-light',color);}functionmain(){changeColor('red');setTimeout(()=>{changeColor('yellow');setTimeout(()=>{changeColor('green');setTimeout(main,2000);},1000);},2000);}main();
Promise 实现
使用Promise，把下一次的颜色改变写在then里面，最后同样使用递归完成循环。
functionsleep(duration){returnnewPromise(resolve=>{setTimeout(resolve,duration);})}functionchangeColor(duration,color){returnnewPromise(resolve=>{console.log('traffic-light',color);sleep(duration).then(resolve);})}functionmain(){returnnewPromise(resolve=>{changeColor(2000,'red').then(()=>{changeColor(1000,'yellow').then(()=>{changeColor(3000,'green').then(()=>{main();})})})})}main();
async await 实现
使用async await就可以避免Promise的一连串.then.then.then，也不再需要递归，使用while就可以实现循环。
functionsleep(duration){returnnewPromise(resolve=>{setTimeout(resolve,duration);})}asyncfunctionchangeColor(color,duration){console.log('traffic-light',color);awaitsleep(duration);}asyncfunctionmain(){while(true){awaitchangeColor('red',2000);awaitchangeColor('yellow',1000);awaitchangeColor('green',3000);}}main();
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/41895.html；
