循环打印红黄蓝

---

前言

一道比较经典的问题，通过这个问题来对比几种异步编程方法：红灯3s亮一次，黄灯2s亮一次，绿灯1s亮一次；如何让三个等不断交替重复亮灯？

---

一、三个亮灯函数

  function red () {
    console.log('red')
  }
  function yellow () {
    console.log('yellow')
  }
  function green () {
    console.log('green')
  }

二、用callback回调实现

代码如下

  const task = (timer, color, callback) => {
    setTimeout(() => {
      if (color === 'red') {
        red()
      }
      if (color === 'yellow') {
        yellow()
      }
      if (color === 'green') {
        green()
      }
      callback()
    }, timer);
  }
  const step = () => {
    task(3000, 'red', () => {
      task(2000, 'yellow', () => {
        task(1000, 'green', step)
      })
    })
  }
  step()

三、用promise实现

代码如下

  const task = (timer, color) =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        if (color === 'red') {
          red()
        }
        if (color === 'yellow') {
          yellow()
        }
        if (color === 'green') {
          green()
        }
        resolve()
      }, timer);
    })

  const step = () => {
    task(3000, 'red')
      .then(() => task(2000, 'yellow'))
      .then(() => task(1000, 'green'))
      .then(step)
  }
  step()

四、用async实现

代码如下

  const task = (timer, color) =>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        if (color === 'red') {
          red()
        }
        if (color === 'yellow') {
          yellow()
        }
        if (color === 'green') {
          green()
        }
        resolve()
      }, timer);
    })

  const step = async () => {
    await task(3000, 'red')
    await task(2000, 'yellow')
    await task(1000, 'green')
    step()
  }
  step()

---

总结

以上就是今天的内容，这个问题主要是考察异步编程的几种方法