我如何让这个交通灯正确计算持续时间（“duração”），在第一个 cicle 之后，在计时器故障上开始出现视觉故障
var sinal = setTimeout(red, 0)
function red() {
let i = 0
vermelho.style.backgroundColor = cores[0];
amarelo.style.backgroundColor = cores_off[1];
verde.style.backgroundColor = cores_off[2];
setTimeout(yellow, 60000)
var d1 = setInterval(function duração1() {
i++
cromonometro.innerHTML = `${i}`
}, 1000)
}
function yellow() {
let i = 0
vermelho.style.backgroundColor = cores_off[0];
amarelo.style.backgroundColor = cores[1];
verde.style.backgroundColor = cores_off[2];
setTimeout(green, 7000)
var d2 = setInterval(function duração2() {
i++
cromonometro.innerHTML = `${i}`
}, 1000)
}
function green() {
let i = 0
vermelho.style.backgroundColor = cores_off[0];
amarelo.style.backgroundColor = cores_off[1];
verde.style.backgroundColor = cores[2];
setTimeout(red, 60000)
var d3 = setInterval(function duração3() {
i++
cromonometro.innerHTML = `${i}`
}, 1000)
}
我试过使用clear interval，但是我还不知道
有一种方法可能更容易遵循。通过使用 async/await，您可以编写一个“休眠”数秒的函数，而无需调用 setInterval och setTimeout。
（不幸的是，JavaScript 中没有内置的睡眠函数，但我们可以使用 oneliner 创建一个，基本上我们创建了一个承诺，它将在您调用睡眠函数时选择的毫秒数后解析。因为等待只是一种调用承诺的方法 *await sleep(milliseconds) 然后在异步函数中工作正常。）
现在我们要做的就是遍历灯光。我们还可以将每个灯应该亮起的时间列表分成一个小数组，因为它是独立的，所以很容易找到和更改。其余的编程逻辑。
async function trafficLight() {
// a function that let us sleep/pause for a number of ms
const sleep = ms => new Promise(res => setTimeout(res, ms));
// get the div for each light
const [red, yellow, green] =
[...document.querySelectorAll('.traffic-light div')];
// how many seconds should each light be on in a sequence
const onForSeconds = [
[red, 5],
[yellow, 1],
[green, 4],
[yellow, 1]
];
// run the sequence
for (let [light, seconds] of onForSeconds) {
light.classList.add('active');
await sleep(seconds * 1000);
light.classList.remove('active');
}
// call trafficLight again to repeat the sequence
trafficLight();
}
trafficLight();.traffic-light {
display: inline-block;
background: black;
}
.traffic-light div {
border-radius: 50%;
width: 50px;
height: 50px;
margin: 10px;
background-color: rgba(255, 255, 255, 0.3);
transition: background-color 0.5s;
}
.red.active {
background-color: red;
}
.yellow.active {
background-color: yellow;
}
.green.active {
background-color: green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic-lights</title>
</head>
<body>
<div class="traffic-light">
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
</body>
</html>制作
d1d2d3var sinal = setTimeout(red, 0)
let d1, d2, d3;
function red() {
clearInterval(d3);
let i = 0
vermelho.style.backgroundColor = cores[0];
amarelo.style.backgroundColor = cores_off[1];
verde.style.backgroundColor = cores_off[2];
setTimeout(yellow, 60000)
d1 = setInterval(function duração1() {
i++
cromonometro.innerHTML = `${i}`
}, 1000)
}
function yellow() {
clearInterval(d1);
let i = 0
vermelho.style.backgroundColor = cores_off[0];
amarelo.style.backgroundColor = cores[1];
verde.style.backgroundColor = cores_off[2];
setTimeout(green, 7000)
d2 = setInterval(function duração2() {
i++
cromonometro.innerHTML = `${i}`
}, 1000)
}
function green() {
clearInterval(d2);
let i = 0
vermelho.style.backgroundColor = cores_off[0];
amarelo.style.backgroundColor = cores_off[1];
verde.style.backgroundColor = cores[2];
setTimeout(red, 60000)
d3 = setInterval(function duração3() {
i++
cromonometro.innerHTML = `${i}`
}, 1000)
}顺便说一句，你的周期是倒退的。正常顺序是绿色 -> 黄色 -> 红色。