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怎么实现红绿灯的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！