脚本宝典收集整理的这篇文章主要介绍了javascript怎么实现红绿灯，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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基础教程》

以上就是javascript怎么实现红绿灯的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript怎么实现红绿灯全部内容，希望文章能够帮你解决javascript怎么实现红绿灯所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。