如何修复交通灯计时器首轮循环后出现的计时视觉故障

你的问题核心是每次切换灯色时，之前启动的计时器没有被清除，导致多个setInterval同时修改计时器显示元素，造成视觉上的闪烁。

修复思路 #

• 把计时器变量提到全局作用域，方便在切换灯色时统一管理
• 每次进入新的灯色函数，先清除上一轮的计时器
• 重置计时数值后，再启动新的计时器

修改后的完整代码 #

// 全局变量存储当前运行的计时器
let currentTimer;
// 初始启动红灯
setTimeout(red, 0);

function red() {
    // 先清除上一轮的计时器
    clearInterval(currentTimer);
    let i = 0;
    // 更新灯色
    vermelho.style.backgroundColor = cores[0];
    amarelo.style.backgroundColor = cores_off[1];
    verde.style.backgroundColor = cores_off[2];
    // 设置下一个灯色的切换定时器
    setTimeout(yellow, 60000);
    // 启动新的计时器并赋值给全局变量
    currentTimer = setInterval(function() {
        i++;
        cromonometro.innerHTML = `${i}`;
    }, 1000);
}

function yellow() {
    clearInterval(currentTimer);
    let i = 0;
    vermelho.style.backgroundColor = cores_off[0];
    amarelo.style.backgroundColor = cores[1];
    verde.style.backgroundColor = cores_off[2];
    setTimeout(green, 7000);
    currentTimer = setInterval(function() {
        i++;
        cromonometro.innerHTML = `${i}`;
    }, 1000);
}

function green() {
    clearInterval(currentTimer);
    let i = 0;
    vermelho.style.backgroundColor = cores_off[0];
    amarelo.style.backgroundColor = cores_off[1];
    verde.style.backgroundColor = cores[2];
    setTimeout(red, 60000);
    currentTimer = setInterval(function() {
        i++;
        cromonometro.innerHTML = `${i}`;
    }, 1000);
}

关键修改点说明 #

1. 全局计时器变量：currentTimer用来记录当前正在运行的计时器，确保每次切换灯色时能精准清除旧的计时器
2. 清除旧计时器：每个灯色函数开头都调用clearInterval(currentTimer)，避免多个计时器同时运行
3. 简化计时器函数：去掉了没必要的函数命名（比如duração1），直接用匿名函数更简洁

内容的提问来源于stack exchange，提问作者Clésio