红绿灯无限循环的 3 种实现，哪种更受面试官青睐？

引言

红绿灯是前端面试中常见的一道编程题，它考察了开发者对异步编程、状态管理和代码组织能力的理解。看似简单的问题，却能反映出候选人的编程思维和代码质量。本文将介绍三种常见的红绿灯无限循环实现方式，并分析它们在面试中的表现。

实现方式1：使用 setTimeout/setInterval

这是最直观、最容易理解的一种实现方式。

function trafficLight() {
  let state = 'red';
  
  function changeLight() {
    console.log(state);
    
    if (state === 'red') {
      state = 'green';
      setTimeout(changeLight, 5000); // 红灯5秒
    } else if (state === 'green') {
      state = 'yellow';
      setTimeout(changeLight, 3000); // 绿灯3秒
    } else if (state === 'yellow') {
      state = 'red';
      setTimeout(changeLight, 2000); // 黄灯2秒
    }
  }
  
  changeLight(); // 启动循环
}

trafficLight();

优点：

• 代码直观易懂，逻辑清晰
• 适合初学者理解异步编程的基本概念
• 实现简单，不需要复杂的编程范式

缺点：

• 使用回调函数，容易形成回调地狱
• 难以处理复杂的状态转换
• 不利于代码的扩展和维护

实现方式2：使用 Promise 和 async/await

这种方式利用了现代 JavaScript 的异步特性，使代码更加线性化。

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function trafficLight() {
  while (true) {
    console.log('red');
    await sleep(5000);
    
    console.log('green');
    await sleep(3000);
    
    console.log('yellow');
    await sleep(2000);
  }
}

trafficLight();

优点：

• 代码结构清晰，易于理解
• 避免了回调地狱，使用线性的代码结构
• 更容易处理复杂的异步流程
• 符合现代 JavaScript 的编程风格

缺点：

• 需要理解 Promise 和 async/await 的概念
• 在某些旧浏览器中可能需要 polyfill
• 相对于第一种方式，抽象层次更高

实现方式3：使用状态机和事件驱动

这种方式将红绿灯视为一个状态机，通过事件驱动状态转换。

class TrafficLight {
  constructor() {
    this.states = {
      red: { next: 'green', duration: 5000 },
      green: { next: 'yellow', duration: 3000 },
      yellow: { next: 'red', duration: 2000 }
    };
    this.currentState = 'red';
    this.timer = null;
  }
  
  start() {
    this.changeState();
  }
  
  changeState() {
    console.log(this.currentState);
    
    // 清除之前的定时器
    if (this.timer) {
      clearTimeout(this.timer);
    }
    
    // 获取当前状态的配置
    const stateConfig = this.states[this.currentState];
    
    // 设置定时器切换到下一个状态
    this.timer = setTimeout(() => {
      this.currentState = stateConfig.next;
      this.changeState();
    }, stateConfig.duration);
  }
}

const light = new TrafficLight();
light.start();

优点：

• 代码结构清晰，职责分离
• 易于扩展，可以方便地添加新状态或修改状态转换逻辑
• 符合面向对象的设计原则
• 状态管理更加规范，适合复杂的应用场景

缺点：

• 代码量相对较大
• 对于简单的红绿灯实现来说可能有些过度设计
• 需要理解状态机的设计模式

各实现方式的优缺点对比

实现方式	可读性	可维护性	扩展性	代码量	学习曲线
setTimeout/setInterval	高	低	低	少	低
Promise/async/await	中	中	中	中	中
状态机/事件驱动	中	高	高	多	高

面试官青睐的实现方式分析

在面试中，不同的面试官可能有不同的偏好，但一般来说，以下几种实现方式更容易获得青睐：

1. Promise/async/await 实现

这种实现方式展示了候选人对现代 JavaScript 异步编程的理解，代码简洁且易于维护。面试官通常会欣赏这种既实用又符合现代编程风格的实现。

为什么受青睐：

• 展示了对 ES2017+ 特性的掌握
• 代码结构清晰，避免了回调地狱
• 实现简洁，没有过度设计
• 适合大多数实际应用场景

2. 状态机实现

虽然代码量较大，但这种实现方式展示了候选人的架构设计能力和对复杂状态管理的理解。对于高级职位或对架构能力有要求的岗位，这种实现方式尤为加分。

为什么受青睐：

• 展示了面向对象设计和状态机模式的理解
• 代码结构清晰，职责分离
• 易于扩展和维护
• 适合复杂的应用场景

不太受青睐的实现方式

纯 setTimeout/setInterval 的实现虽然简单直观，但在面试中可能被认为过于基础，缺乏对现代 JavaScript 特性的展示。除非面试明确要求使用最简单的方式，否则建议选择更高级的实现方式。

总结与最佳实践建议

1. 根据面试级别选择实现方式：

   • 初级开发者：可以展示 setTimeout/setInterval 实现，并解释其局限性
   • 中级开发者：推荐 Promise/async/await 实现，展示对现代异步编程的理解
   • 高级开发者：可以展示状态机实现，并讨论其设计优势和扩展性

2. 无论选择哪种实现，都要注意：

   • 清晰的代码结构和命名
   • 适当的注释说明
   • 对实现原理的深入理解
   • 能够讨论各种实现方式的优缺点

3. 最佳实践建议：

   • 在实际项目中，对于简单的红绿灯场景，推荐使用 Promise/async/await 实现
   • 对于复杂的状态管理系统，考虑使用状态机或现有的状态管理库
   • 始终考虑代码的可读性、可维护性和可扩展性

通过红绿灯这个简单的问题，面试官实际上是在考察候选人的多个方面：对 JavaScript 基础知识的掌握、异步编程的理解、代码组织能力以及解决问题的思路。选择合适的实现方式并能够清晰地解释其原理和优缺点，将给面试官留下深刻印象。觉得有用就点个关注！我会持续分享更多实用工具和效率技巧。想直接体验？各类免费、开箱即用的在线工具，都在我的【星点工具箱】网站等你来玩！