promise 如何实现红绿黄灯亮
最近面试的时候被问到了promise 如何实现红绿灯亮的问题,在这里记录一下
要使用 Promise 实现红绿灯(红、绿、黄灯依次亮起)的效果,核心是利用 Promise 的异步特性和链式调用,控制每个灯的亮灯时长,并按顺序切换。以下是具体实现方法:
实现思路
-
封装延迟函数:用 Promise 封装 setTimeout,返回一个延迟指定时间后 resolve 的 Promise,用于控制每个灯的亮灯时长。
-
定义灯的切换逻辑:按 “红灯→绿灯→黄灯→红灯……” 的顺序,依次调用延迟函数,每次延迟后切换灯的状态(亮 / 灭)。
-
循环执行:在黄灯结束后,重新开始红灯的逻辑,形成无限循环。
代码实现(含注释)
// 1. 封装延迟函数:返回一个延迟 time 毫秒后 resolve 的 Promise
function delay(time) {return new Promise((resolve) => {setTimeout(resolve, time);});
}// 2. 定义红绿灯状态切换函数
function trafficLight() {// 红灯亮 3 秒(3000ms)console.log("红灯亮");delay(3000).then(() => {// 红灯灭,绿灯亮 2 秒console.log("绿灯亮");return delay(2000);}).then(() => {// 绿灯灭,黄灯亮 1 秒console.log("黄灯亮");return delay(1000);}).then(() => {// 黄灯灭,重新开始循环trafficLight();});
}// 3. 启动红绿灯
trafficLight();
代码解析
- 延迟函数 delay:
接收一个时间参数 time,返回一个 Promise 对象。当 setTimeout 触发后,Promise 状态变为 resolved,后续的 .then() 会被执行。这是控制每个灯亮灯时长的核心。 - 红绿灯逻辑 trafficLight:
首先打印 “红灯亮”,然后调用 delay(3000) 表示红灯持续 3 秒。
3 秒后,第一个 .then() 执行:打印 “绿灯亮”,并返回 delay(2000)(绿灯持续 2 秒)。
2 秒后,第二个 .then() 执行:打印 “黄灯亮”,返回 delay(1000)(黄灯持续 1 秒)。
1 秒后,第三个 .then() 执行:重新调用 trafficLight(),形成无限循环。 - 循环机制:
通过在黄灯结束后递归调用 trafficLight(),实现红绿灯的循环切换。