TrafficLight

用js实现红绿灯效果：红 4s -> 黄 2s -> 绿 4s -> 黄 2s 循环播放

// 初始化红绿灯集合
const lights = [
  {
    name: '红',
    time: 4000,
  },
  {
    name: '黄',
    time: 2000,
  },
  {
    name: '绿',
    time: 4000,
  },
]

// 初始化指针
const point = {
  position: 0,
  direction: 0, // 控制指针移动方向属性：0：向右，1：向左
}

recycle()

/**
 * 指针移动控制器
 * 通过判断指针位置控制指针移动方向
 */
function recycle() {
  activeLights(lights[point.position])
  if (point.position < lights.length - 1 && point.direction === 0) {
    // 如果指针未到达最后一个元素并且指针移动方向向右，则执行右向下一个任务
    point.position += 1
  } else if (point.position > 0 && point.direction === 1) {
    // 如果指针未到达第一个元素并且指针移动方向向左，则执行左向下一个任务
    point.position -= 1
  } else if (point.position === lights.length - 1) {
    // 如果指针位置在最后一个元素，则改变方向向左
    point.direction = 1
    point.position -= 1
  } else if (point.position === 0) {
    // 如果指针位置在第一个元素，则改变方向向右
    point.direction = 0
    point.position += 1
  }
}

/**
 * 激活指定灯的闪烁
 */
function activeLights(light) {
  class TwinkleLight {
    constructor() {
      this.light = light
      this.count = 0
    }

    twinkle() {
      const that = this
      const promise = new Promise(((resolve) => {
        setTimeout(function () {
          console.log(`${that.light.name} - ${that.count + 1}`)
          that.count += 1
          if (that.count === that.light.time / 1000) {
            resolve(that.count)
          } else {
            that.twinkle()
          }
        }, 1000)
      }))
      // 成功回调后才执行下一次闪烁
      promise.then(() => {
        recycle()
        return true
      }).catch((err) => {
        console.warn(`Error: ${err}`)
      })
    }
  }

  const twinkle = new TwinkleLight(light)
  twinkle.twinkle()
}