Promise实现动态红绿灯切换

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前段时间写了一个Promise实现红绿灯的操作，但是只有代码没有直观的样例显示，趁着这次码上掘金活动，将Promise红绿灯的操作放到dom中来进行具体的可视化实现，采用的原理还是之前的Promise和async、await的写法一直，通过事件循环的方式来对红绿灯进行颜色的切换，同时加入了倒计时的数字，更新了一下版本。

文章的内容不多，欢迎大家阅读和批评指正。

<div class="light">
      <div :class="['ll' ,lightColor=='red'?'l1':'']">{{lightColor=='red'?index:''}}</div>
      <div :class="['ll' ,lightColor=='green'?'l2':'']">{{lightColor=='green'?index:''}}</div>
      <div :class="['ll' ,lightColor=='yellow'?'l3':'']">{{lightColor=='yellow'?index:''}}</div>
    </div>

先放置我们的div，给三个灯加上各自的样式，Js中会通过循环改变lightColor的值从而让各个灯去切换不同的颜色，同时会在各个灯中写入一个倒计时的样式，

  <script>
  import { defineComponent, ref } from 'vue';
  
  export default defineComponent({
    setup() {
      const count = ref(0);
      function addCount() {
        count.value += 1;
      }
      let lightColor = ref('');
      let index = ref(0);
      let lightTimer 
      start()
      async function start(){
        await light('red',3)
        await light('green',5)
        await light('yellow',3)
        start()
      }
      function light(color,timer){
        lightColor.value = color
        index.value = timer
        return new Promise((res,rej)=>{
            index.value = timer--
            lightTimer = setInterval(() => {
                console.log(timer)
                index.value = timer--
                if(index.value==-1){
                    clearInterval(lightTimer)
                    res()
                }
            }, 1000);
                // setTimeout(()=>{
                // },timer*1000)
        })
      }
      return {
        count,
        addCount,
        lightColor,
        index
      };
    },
  });
  </script>

js部分还是按照之前的async和await的写法来进行切换操作，原理就是在各个await中返回我们的Promise，按照事件循环的原理，JS遇到await中会停止后续代码的进行，需要当其中的Promise执行完成并且返回一个状态的时候才会执行后续的代码

这里我们在Promise执行前的时候，先对Promise加入颜色的切换，然后写入初始的倒计时，接着发出我们的定时器，定时器的时间按照传入的延时进行操作，定时器结束后返回状态，并且在定时器中加入interval来对倒计时进行实现，每一秒减少，定时器结束后返回一个resolved，await会跳出，执行下一行的代码，也就是下一个awiat。

当我们的红绿灯切换一轮之后，继续调用start函数，其实就是通过调用自己来进行自动的下一轮红绿灯的切换。这样就达到了自动切换的效果。