JS中如何实现红绿灯效果，方法是什么？-群英

上一篇：用JS怎样实现魔方动态转换的效果，代码是什么？下一篇：JavaScript中箭头函数和用法是什么，怎样应用？

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有帮助，想要了解更多可以继续浏览群英网络其他相关的文章。

文本转载自PHP中文网