我在下面编写了应该执行交通信号灯序列的代码，但是setInterval和setTimeout似乎没有按我预期的那样工作。
我想做的是为每个更改灯光颜色的功能设置一个重复时间。
setInterval(function multipleFunction() {
setInterval(trafficOne, 1000);
setTimeout(setInterval(trafficTwo, 1000), 1000);
setTimeout(setInterval(trafficThree, 1000), 2000);
setTimeout(setInterval(trafficFour, 1000), 3000);
}, 4000)
function trafficOne() {
document.getElementById('circle1').style.backgroundColor = 'red'
document.getElementById('circle2').style.backgroundColor = 'yellow'
}
function trafficTwo() {
document.getElementById('circle1').style.backgroundColor = 'black'
document.getElementById('circle2').style.backgroundColor = 'black'
document.getElementById('circle3').style.backgroundColor = 'green'
}
function trafficThree() {
document.getElementById('circle1').style.backgroundColor = 'black'
document.getElementById('circle2').style.backgroundColor = 'yellow'
document.getElementById('circle3').style.backgroundColor = 'black'
}
function trafficFour() {
document.getElementById('circle1').style.backgroundColor = 'red'
document.getElementById('circle2').style.backgroundColor = 'black'
document.getElementById('circle3').style.backgroundColor = 'black'
}#container {
width: 80px;
height: 230px;
border-style: solid;
padding: 10px;
margin: 10px;
border-width: 1px;
border-color: black;
}
#container2 {
width: 60px;
height: 180px;
border-style: solid;
background: black;
margin: 10px;
border-width: 1px;
border-color: black;
}
#circle1 {
width: 50px;
height: 50px;
border-radius: 25px;
background: red;
margin: 5px;
}
#circle2 {
width: 50px;
height: 50px;
margin: 5px;
border-radius: 25px;
background: black;
}
#circle3 {
width: 50px;
height: 50px;
margin: 5px;
border-radius: 25px;
background: black;
}<div id="container">
<button id="change" onClick="multipleFunction()">Start traffic</button>
<div id="container2">
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
</div>
</div>最佳答案
您不能很好地定义自己的功能。
试试这个，尝试去理解发生了什么。如果您需要帮助，请询问:)
编辑：添加一些评论，希望对您有所帮助
<!DOCTYPE html>
<html>
<head>
<style>
#container{
width:80px;
height:230px;
border-style:solid;
padding:10px;
margin:10px;
border-width: 1px;
border-color:black;
}
#container2{
width:60px;
height:180px;
border-style: solid ;
background:black;
margin:10px;
border-width: 1px;
border-color: black;
}
#circle1 {
width: 50px;
height: 50px;
border-radius: 25px;
background: red;
margin:5px;
}
#circle2 {
width: 50px;
height: 50px;
margin:5px;
border-radius: 25px;
background: black;
}
#circle3 {
width: 50px;
height: 50px;
margin:5px;
border-radius: 25px;
background: black;
}
</style>
<script>
// init state of timer, no timer set
var timer = null;
// function to start and stop the traffic light
function toggle(){
// test if a timer is set and running
if(timer != null){
// the timer is running --> stop that timer
clearInterval(timer);
// reset the timer
timer = null;
// set the traffic light to an inital state
document.getElementById('circle1').style.backgroundColor='red';
document.getElementById('circle2').style.backgroundColor='black';
document.getElementById('circle3').style.backgroundColor='black';
}else{
// no timer is running --> start the first step
trafficOne();
}
}
function trafficOne() {
// set the light of this state
document.getElementById('circle1').style.backgroundColor='red';
document.getElementById('circle2').style.backgroundColor='yellow';
document.getElementById('circle3').style.backgroundColor='black';
// set a timeout of 1s, if it is over start the next function
timer = window.setTimeout(trafficTwo, 1000);
}
function trafficTwo() {
// set the light of this state
document.getElementById('circle1').style.backgroundColor='black'
document.getElementById('circle2').style.backgroundColor='black'
document.getElementById('circle3').style.backgroundColor='green'
// set a timeout of 1s, if it is over start the next function
timer = window.setTimeout(trafficThree, 1000);
}
function trafficThree() {
// set the light of this state
document.getElementById('circle1').style.backgroundColor='black'
document.getElementById('circle2').style.backgroundColor='yellow'
document.getElementById('circle3').style.backgroundColor='black'
// set a timeout of 1s, if it is over start the next function
timer = window.setTimeout(trafficFour, 1000);
}
function trafficFour() {
// set the light of this state
document.getElementById('circle1').style.backgroundColor='red'
document.getElementById('circle2').style.backgroundColor='black'
document.getElementById('circle3').style.backgroundColor='black'
// set a timeout of 1s, if it is over start the next function
timer = window.setTimeout(trafficOne, 1000);
}
</script>
</head>
<body>
<div id="container">
<button id ="change" onClick="toggle()" >Start traffic</button>
<div id="container2">
<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
</div>
</div>
</body>
</html>关于javascript - 重复交通灯序列，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41938926/