实现一个红绿灯

皆凡人

于 2019-09-20 13:39:23 发布

阅读量4.1k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：前端面试题

本文链接：https://blog.youkuaiyun.com/qq_37431724/article/details/101057674

本文介绍了在前端面试中遇到的红绿灯实现问题，通过Promise和async/await来创建交替效果。在晚上，交替时间会增加。文章详细阐述了实现步骤，包括使用changeColor改变样式，根据时间判断夜晚并调整间隔，以及通过异步操作确保灯光顺序交替。同时还提供了完整的代码和展示效果的截图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天二面，面试官让写一个红绿灯，现场写了个简单的，今天整理了一下，把样式加了上去。

题目要求：
实现一个交替的红绿灯，在晚上的时候交替时间增加；

核心思想：
使用promise，在setTimeOut设定时间后换一个灯。用async await递归完成不停交替；

步骤1：

通过changeColor实现样式效果，然后获取当前时间，判断是否为晚上，再为其设置交替相隔时间；
使用setTimeOut设置在interval时间后，将promise的状态变为fulfilled。

function light(color, num) {
   
   
    return new Promise((resolve, reject) => {
   
   
        changeColor(color, num);
        let hour = new Date().getHours(), interval;
        if (hour < 18) {
   
   
            interval = 2000;
        } else {
   
   
            interval = 5000;
        }
        setTimeout(resolve, interval);
    })
}

步骤2：

用async/await异步操作，await接收一个promise对象，等上一个await完成后，async/await内置执行器指针自动下移，执行下一个语句，最后三个灯都显示过后，通过递归，实现不停交替的过程；

async function blink() {
   
   
    await light('red', 0);
    await light('orange', 1);
    await light('green', 2);
    await blink();
}

blink();

或者使用for循环也ok，更好看一点

最低0.47元/天解锁文章

200万优质内容无限畅学