前端面试题：信号控制灯

题目

使用Vue实现一个信号控制灯控制器，要求：

1. 默认情况下

   1. 红灯亮20秒，并且最后闪烁5秒
   2. 绿灯亮20秒，并且最后闪烁5秒
   3. 黄灯亮10秒

2. 灯的个数、颜色、持续时间、闪烁时间、灯光次序都可配置。如：

   [{color:'#fff',duration: 10000,twinkleDuration: 5000}, ...]

分析

可以简单的分成两部来做：

1. 信号灯
2. 控制器

信号灯需要做的事情：

1. 接受颜色
2. 亮、闪烁
3. 结束后通知控制器

控制器需要做的事情：

1. 接收创建信号灯
2. 接受信号灯的结束通知，并启动下一个信号灯

显然，这是题考察的是JavaScript的异步编程，我们直接开撕。

手撕

初版

function Light(color, duration, twinkleDuration) {
    // 信号灯
    let brightDuration = duration - twinkleDuration;
    function bright() {
   			// 亮
        return new Promise(function (resolve, reject) {
   
            console.log(`${
     color}灯开始亮`)
            setTimeout(resolve, brightDuration);
        })
    }
    function twinkle() {
   	// 闪烁
        return new Promise(function (resolve, reject) {
   
            console.log(`${
     color}灯开始闪烁`)
            setTimeout(resolve, twinkleDuration);
        })
    }
    function start() {
   	// 启动信号灯
        return new Promise(async function (resolve, reject) {
   
            await bright()				// ①
            await twinkle() 			// ②
            console.log(`${
     color}灯灭掉`)
            resolve()
        })
    }
    return {
   
        start
    }
}
function timer() {
    // 计时器，用来测试
    let start = new Date()
    let now = new Date()
    function next() {
   
        now = new