promise实现超级棒的红绿灯（我不要你觉得）_promise实现超级棒的红绿灯(我不要你觉得)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42369566/article/details/110443448

博主学习Promise和事件轮询遇到困难，经努力参透了Promise的一点知识，并做实例练习记录。代码思路写在注释上，还提到CSS部分无注释，认为读者对其较熟悉。

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

今天学promise，事件轮询…叫苦不迭，这理解起来着实是需要费好大一番劲儿啊~~~

不过呢，在我的不懈努力之下，终于参破了promise一点点点的知识，赶紧做个实例练习，记录下来！

依然是思路写在注释上，上代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>red-green-yellow</title>
</head>
<style>
    html, body {
        width: 100%;
        height: 100%;
    }
    .container {
        width: 200px;
        height: 50px;
        border: 1px solid black;
        border-radius: 50px;
        background-color: #ccc;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    #red, #green, #yellow {
        height: 20px;
        width: 20px;
        border-radius: 20px;
        border: 1px solid black;
        position: absolute;
    }
    #red {
        top: 50%;
        left: 30%;
        transform: translateY(-50%) translateX(-50%);
    }
    #green {
        top: 50%;
        left: 70%;
        transform: translateY(-50%) translateX(-50%);
    }
    #yellow {
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
    .white {
        background-color: #fff;
    }
    .red {
        background-color: red;
    }

    .green {
        background-color: green;
    }

    .yellow {
        background-color: yellow;
    }
</style>
<body>
<div class="container">
    <div id="red" class="white"></div>
    <div id="yellow" class="white"></div>
    <div id="green" class="white"></div>
</div>
<script>
    //red 10s  yellow 3s  green 5s  车的 人行道 秒数反过来
    //获取元素对象  我知道id可以不用写这步直接用  但是idea报浪线就是难受！而且下面还有用呢
    let red = document.getElementById('red');
    let yellow = document.getElementById('yellow');
    let green = document.getElementById('green');
    //创建promise对象的函数
    function creatPromise() {
        // s 代表 执行几秒（比如说红灯，你准备让它亮几秒）
        // e 代表哪个灯 是红灯就传red
        // color 改变颜色是通过更换类名实现的  所以这里就是代表类名
        return function (s,e,color) {
            return new Promise((resolve,reject)=>{
                // 创建 立马让它颜色亮起
                e.className=color;
                // s秒之后执行resolve 让它灭掉
                setTimeout(resolve,s);
            })
        }
    }
    //r==>red y==>yellow g==>green
    let r =creatPromise();
    let y =creatPromise();
    let g =creatPromise();
    //红绿灯循环函数  递归实现  也可以写成沙箱，立即执行
    function r_loop() {
        //创建red的promise对象 执行亮起，then代表resolve 是setTimeout的回调 s秒之后red灭掉
        //return 创建yellow的promise对象 黄灯亮起 ... 一直继续到第二次黄灯，就该递归，再红灯...形成循环了
        r(10000,red,'red').then(()=>{
            red.className='white';
            return y(3000,yellow,'yellow');
        }).then(()=>{
            yellow.className='white';
            return g(4000,green,'green');
        }).then(()=>{
            green.className='white';
            return y(3000,yellow,'yellow');
        }).then(()=>{
            yellow.className='white';
        }).then(()=>{
            r_loop();
        })
    }
    r_loop();
    //ok  完美实现 
</script>
</body>
</html>