Promise实现的交通灯模拟-优快云博客

本文介绍了一个使用Promise实现的交通灯模拟案例。通过redFunc、greenFunc和yellowFunc函数分别控制红绿黄灯的显示，每个颜色的灯显示指定秒数后自动切换。利用Promise的then方法串联各个阶段，实现灯效的连续变化。当红灯结束后，会再次调用shine函数，形成交通灯的循环效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面这是一个用promise写的小案例红绿灯当成功时调用resolve(); 使用promise的then方法接收结果

Title

return new Promise(function(resolve, reject){
    let myTimer=setInterval(()=>{
        count--;
        $("#greenLight").innerHTML=count;
        if(count<=0){
            count=0;
            clearInterval(myTimer);
            $("#greenLight").innerHMTL=" ";
            $("#greenLight").style.background="white";
            resolve();
        }

    },1000);
})

}

function yellowFunc(){
$("#yellowLight").style.background=“yellow”;
let count=2;
$("#yellowLight").innerHTML=count;

return new Promise(function(resolve, reject){
    let myTimer=setInterval(()=>{
        count--;
        if(count<=0){
            count=0;
            clearInterval(myTimer);
            $("#yellowLight").innerHTML=" ";
            $("#yellowLight").style.background="white";
            resolve();
        }
        $("#yellowLight").innerHTML=count;
    },1000);
})

}

function shine(){
redFunc().then(greenFunc).then(yellowFunc).then(shine);
}

window.οnlοad=function(){
shine();
}

function $(str){
    if(str.charAt(0)=="#"){
        return document.getElementById(str.substring(1));
    }else if(str.charAt(0)=="."){
        return document.getElementsByClassName(str.substring(1));
    }else{
        return document.getElementsByTagName(str);
    }
}