【场景应用题】循环打印红绿灯下面来看一道比较典型的问题，通过这个问题来对比几种异步编程方法：红灯 3s亮一次，绿灯1s亮

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

三个亮灯函数：

// 三个亮灯函数
function red() {
    console.log('red')
}
function green() {
    console.log('green')
}
function yellow() {
    console.log('yellow')
}

这道题复杂的地方在于需要“交替重复”亮灯，而不是“亮完一次”就结束了。

这道题的主要思想是递归调用

可以使用1、callback实现，2、用promise实现，3、用async/await实现，这三种方式实现。

1、用callback实现

// 任务函数
const task = (timer, light, callback) => {
    setTimeout(() => {
        if (light === 'red') {
            red()
        } else if (light === 'green') {
            green()
        } else if (light === 'yellow') {
            yellow()
        }
        callback()
    }, timer)
}

递归调用函数

// 执行函数
const step = () => {
    task(3000, 'red', () => {
        task(1000, 'green', () => {
            // 递归调用
            task(2000, 'yellow', step)
        })
    })
}

step()

2、用promise实现

// 任务函数
const task2 = (timer, light) => {
    new Promise((resolve, reject) => {
        setTimeout(() => {
            if (light === 'red') {
                red()
            } else if (light === 'green') {
                green()
            } else if (light === 'yellow') {
                yellow()
            }
            resolve()
        }, timer)
    })
}

递归调用函数

// 执行函数
const step2 = () => {
    task2(3000, 'red').then(() => {
        task2(1000, 'green')
    }).then(() => {
        task2(2000, 'yellow')
    }).then(() => {
        // 递归调用
        step2()
    })
}
step2()

3、用async/await实现

// 任务函数
const task3 = (timer, light) => {
    new Promise((resolve, reject) => {
        setTimeout(() => {
            if (light === 'red') {
                red()
            } else if (light === 'green') {
                green()
            } else if (light === 'yellow') {
                yellow()
            }
            resolve()
        }, timer)
    })
}

递归调用函数

// 执行函数
const step3 = async () => {
    await task2(3000, 'red');
    await task2(1000, 'green')
    await task2(2000, 'yellow')
    // 递归调用
    step3()
}

step3()