为何一个三元表达式会抵消另一个？交通灯功能异常排查

问题出在橙灯的两次独立赋值逻辑：当sec处于26-29区间时，第一个三元语句会把橙灯设为橙色，但紧接着执行的第二个橙灯控制语句，因为sec >=54不成立，会触发else分支将橙灯重新设为黑色，直接覆盖了之前的正确设置。

解决思路 #

把橙灯的所有控制逻辑整合到一个条件判断中，确保优先级高的逻辑（26-29秒常亮）先被判断，只有当前面的条件不满足时，才会执行后续的闪烁逻辑，避免重复赋值覆盖。

修改后的代码 #

let time = new Date();
let sec = time.getSeconds();
const defaultSystem = setInterval(dispSecs, 1000);

function dispSecs() {
    console.log(sec);
    // 简化秒数更新逻辑
    sec = (sec + 1) % 60;

    // 绿灯控制
    greenLight.style.backgroundColor = sec < 26 ? 'green' : 'black';

    // 整合橙灯的所有控制逻辑，避免覆盖
    orangeLight.style.backgroundColor = 
        sec >= 26 && sec < 29 ? 'orange' :
        sec >= 54 && sec % 2 === 0 ? 'orange' :
        'black';

    // 红灯控制
    redLight.style.backgroundColor = sec >=29 && sec <54 ? 'red' : 'black';
}

额外优化点 #

• 把sec++和sec ===60 ? sec=0 : sec简化成sec = (sec +1) %60，逻辑更清晰且不易出错。
• 将每个灯的控制逻辑独立成块，可读性更强。

内容的提问来源于stack exchange，提问作者Steven Brooks