JavaScript實現一個紅綠燈程序

這個題算是一個比較經典的面試題了，代碼實現也很簡單，下面我們就來看看是怎樣實現的

setTimeout 版本

setTimeout 是 JavaScript 中的炸彈定時器，setTimeout 執行完就會立即被回收，那么我們就可以利用這個特點，在回收之前再去調用一個 setTimeout ，這樣就能輸出下一個燈的信息，當所有的燈都輸出完畢后，我們就可以再遞歸調用一下程序，這樣就會一直循環輸出紅綠燈了

function trafficLights() {
  console.log('綠燈')
  setTimeout(() => {
    console.log('黃燈')
    setTimeout(() => {
      console.log('紅燈')
      setTimeout(() => {
        fn()
      }, 2000)
    }, 2000)
  }, 2000)
}
trafficLights()

Promise 版本

setTimeout 版本實現起來不是那么優雅，ES6的出現，可以讓我們使用 async 和 Promise 去實現這個操作

function red() {
  console.log('紅燈')
}

function green() {
  console.log('綠燈')
}

function yellow() {
  console.log('黃燈')
}

function wait(time, cb) {
  return new Promise((resolve) => {
    setTimeout(() => {
      cb()
      resolve()
    }, time)
  })
}

async function main() {
  while(true) {
    await wait(3000, red)
    await wait(2000, green)
    await wait(2000, yellow)
  }
}

main()

可以看到 Promise 實現起來代碼邏輯比較清晰，而且我們可以使用 while 循環來代替遞歸