如何用js实现一个红绿灯昨天看winter老师开的一门课，重学前端，感觉很棒，在最新一节课（异步相关）的末尾有个课后题，

昨天看winter老师开的一门课，重学前端，感觉很棒，在最新一节课（异步相关）的末尾有个课后题，如何用js实现一个红绿灯。那我们如何实现呢。

首先第一步：分析需求

一个红绿灯，有哪些功能呢：红灯绿灯黄灯依次切换，并且一直循环。

看功能很简单

第二步：设计实现方案

写一个定时任务，一直循环

第三步：代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ss{
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        #sss{
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        #ssss{
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }
        .s {
            width: 400px;
            height: 140px;
            border: 1px solid #666;
            border-radius: 20px;
            background: #f7f7f7;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="s">
<div id="ss">
</div>
    <div id="sss">
    </div>
    <div id="ssss">
    </div>
</div>
</body>
<script>
   window.onload = () => {
       let bg1 = document.getElementById('ss')
       let bg2= document.getElementById('sss')
       let bg3 = document.getElementById('ssss')
       let setColor = (color, duration, num) => {
           return new Promise((res,rej) => {
               colors(num, color)
               setTimeout(res, duration)
           })
       }
       let colors = (num, color) => {
           if(num === 1) {
               bg1.style.background = color
               bg2.style.background = '#E2DCDC'
               bg3.style.background = '#E2DCDC'
           }
           if(num === 2) {
               bg2.style.background = color
               bg1.style.background = '#E2DCDC'
               bg3.style.background = '#E2DCDC'
           }
           if(num === 3) {
               bg3.style.background = color
               bg2.style.background = '#E2DCDC'
               bg1.style.background = '#E2DCDC'
           }
       }
       async function sett() {
            await setColor('green', 6000, 1)
           await setColor('yellow', 2000, 2)
           await setColor('red', 4000, 3)
           await sett()
       }
       sett()
   }
</script>
</html>

核心代码：

let setColor = (color, duration, num) => {
           return new Promise((res,rej) => {
               colors(num, color)
               setTimeout(res, duration)
           })
       }
async function sett() {
            await setColor('green', 6000, 1)
           await setColor('yellow', 2000, 2)
           await setColor('red', 4000, 3)
           await sett()
       }

写一个异步任务，返回promise，其中写一个settimeout方法，让当前灯一直留存

sett方法依次调用红绿灯的顺序，以及显示时间。用await阻塞当前异步任务，最后调用自身，保证循环调用。