如何用JavaScript编写一个模拟真实红绿灯的长尾词程序？

本文共计428个文字，预计阅读时间需要2分钟。

JavaScript实现红绿灯的几种方法：

1.使用setTimeout和递归来实现循环改变颜色；

2.使用Promise，并在then中改变下一次的颜色；

3.使用async+await和while实现红绿灯效果。

javascript实现红绿灯的方法：1、使用setTimeout和递归来实现循环改变颜色；2、使用Promise，并把下一次的颜色改变写在then里面；3、使用async await和while实现红绿灯效果。

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

javascript怎么实现红绿灯？

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

推荐学习：《javascript基础教程》