javascript - 我可以在一个 setInterval 中插入多个 setTimeouts 吗？

Question

我刚开始学习 JavaScript，现在，我正在制作一个可以亮起红色、绿色和橙色的虚拟交通灯。我想通过在外部添加 setInterval 来进行循环。这是可能的还是我应该使用其他方法来制作循环。我尝试制作一个 for(;;){} 但这会导致错误并且网页永远不会加载。这是我当前的代码。

var red = document.getElementById("circleRed");
var orange = document.getElementById('circleOrange')
var green = document.getElementById('circleGreens');
    
setInterval(
    
  setTimeout( function(){
    red.style.backgroundColor = "red";
  }, 2000),
    
   setTimeout(function(){
      green.style.backgroundColor = "green";
      red.style.backgroundColor = "black";
   }, 5000),
    
    setTimeout(function(){
      orange.style.backgroundColor = "orange";
      green.style.backgroundColor = "black";
    }, 10000),
    
    5000);

#circleRed, #circleGreens, #circleOrange {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    margin-bottom: 10px;
    background-color: "black";
}

.back {
    width: 60px;
    margin: 10px 0px 10px 20px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: black;
}
    
body{
    margin: 0;
}

<div class="back">
  <div id="circleRed">
  </div>
  <div id="circleOrange">
  </div>
  <div id="circleGreens">
  </div>
</div>

Answer 1

您可以在loop 函数中调用所有setTimeout 函数。并使用 setInterval 调用此循环函数。 注意:我还更改了您代码中的一些颜色更改部分。

jsfiddle 链接:https://jsfiddle.net/zgdx5xan/

var red = document.getElementById("circleRed");
var orange = document.getElementById('circleOrange')
var green = document.getElementById('circleGreens');

loop();
setInterval(loop,11000);

function loop(){
	console.log("loop started")
  setTimeout( function(){
    red.style.backgroundColor = "red";
    orange.style.backgroundColor = "black";
    green.style.backgroundColor = "black";
    console.log("red opened")
  }, 2000);

   setTimeout(function(){
    green.style.backgroundColor = "green";
    red.style.backgroundColor = "black";
    console.log("green opened")
  }, 5000);

  setTimeout(function(){
    orange.style.backgroundColor = "orange";
    green.style.backgroundColor = "black";
    red.style.backgroundColor = "black";
    console.log("orange opened")    
  }, 10000);
}

#circleRed, #circleGreens, #circleOrange {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  margin-bottom: 10px;
  background-color: "black";
}



.back{
  width: 60px;
  margin: 10px 0px 10px 20px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: black;
}

body{
  margin: 0;
}

 
   <div class="back">
    <div id="circleRed">

    </div>
    <div id="circleOrange">

    </div>
    <div id="circleGreens">

    </div>
  </div>