? 大厂手写高频考点：用异步实现红绿灯效果

前言

这个考点也属于大厂手写题中二线考点了，如果屏幕前的你如果连promise.all, promise.any,promise.race的手写还存在问题的话，那去实现它们对你的性价比更高一点。

当然多了解一些新知识也没有坏处了,而且这一节也不难的~

Promise实现

代码

const traffic_light = (color, duration) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('traffic_light', color);
            resolve()
        }, duration)
    })
}

const main = () => {
    Promise.resolve()
        .then(() => traffic_light('green', 5000))
        .then(() => traffic_light('yellow', 1000))
        .then(() => traffic_light('red', 2000))
        .then(() => {
            main()
        })
}

main();

• 分析
  • main函数中通过.then链式调用来一直实现红绿灯的效果
  • 还需要构造一个traffic_light函数来定义要执行自定义的color和duration
  • traffic_light函数肯定要返回一个promsie来支持后续的then调用

async await实现

代码

let sleep = time => new Promise(resolve => {
    setTimeout(resolve, time)
})

async function changeColor(color, duration) {
    console.log('traffic-light', color);
    await sleep(duration)
}


async function main() {
    // 无限循环
    while (true) {
        await changeColor('red', 2000);
        await changeColor('yellow', 1000);
        await changeColor('green', 3000)
    }
}


main()

• 分析
  • main函数(头部要加上async)通过while(true)来无限循环代码
  • 为changeColor函数自定义color颜色和duration倒计时的时间
  • sleep函数封装了定时器的函数。它返回一个Promise对象，在指定的时间后会自动解析resolve。

小结

这也是很基础的考察对promise以及async await的用法题了，这种基础题一旦被面试官问到可不能失分了~