javascript - 我将如何自动化这个红绿灯序列？

Question

document.getElementById('AllButton').onclick = switchAll;

function illuminateRed() {
  clearLights();
  document.getElementById('stopLight').style.backgroundColor = "red";
}

function illuminateOrange() {
  clearLights();
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function illuminateGreen() {
  clearLights();
  document.getElementById('goLight').style.backgroundColor = "green";
}

function illuminateRedOrange() {
  clearLights();
  document.getElementById('stopLight').style.backgroundColor = "red";
  document.getElementById('slowLight').style.backgroundColor = "orange";
}

function illuminateBlack() {
  clearLights();

}

function clearLights() {
  document.getElementById('stopLight').style.backgroundColor = "black";
  document.getElementById('slowLight').style.backgroundColor = "black";
  document.getElementById('goLight').style.backgroundColor = "black";
}

var clickTimes = 0;
var change = 1;

function switchAll() {
  clickTimes++;
  switch (clickTimes) {
    case 1:
      clearLights();
      document.getElementById('stopLight').style.backgroundColor = "red";
      break;
    case 2:
      clearLights();
      document.getElementById('stopLight').style.backgroundColor = "red";
      document.getElementById('slowLight').style.backgroundColor = "orange";
      break;
    case 3:
      clearLights();
      document.getElementById('goLight').style.backgroundColor = "green";
      break;
    case 4:
      clearLights();
      document.getElementById('slowLight').style.backgroundColor = "orange";
      break;
    case 5:
      clearLights();
      document.getElementById('stopLight').style.backgroundColor = "red";
      break;
    case 6:
      document.getElementById('stopLight').style.backgroundColor = "black";
      document.getElementById('slowLight').style.backgroundColor = "black";
      document.getElementById('goLight').style.backgroundColor = "black";
      clickTimes = 0
      break;
  }
}

body {
  font-family: sans-serif;
}
#controlPanel {
  float: left;
  padding-top: 30px;
}
.button {
  background-color: gray;
  color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin: 90px 40px;
  cursor: pointer;
}
#traffic-light {
  height: 550px;
  width: 200px;
  float: left;
  background-color: #333;
  border-radius: 40px;
  margin: 30px 0;
  padding: 20px;
}
.bulb {
  height: 150px;
  width: 150px;
  background-color: #111;
  border-radius: 50%;
  margin: 25px auto;
  transition: background 500ms;
}

<div id="controlPanel">
  <h1 id="AllButton" class="button">Switch</h1>
</div>
<div id="traffic-light">
  <div id="stopLight" class="bulb"></div>
  <div id="slowLight" class="bulb"></div>
  <div id="goLight" class="bulb"></div>
</div>

你好，这是我的红绿灯序列，它工作得很好，但我想知道我如何让它自动化，一个按钮说停止，一个按钮说开始，当按下开始时，它会一直循环？提前感谢您的阅读。

Answer 1

如评论中所述，我将使用 setInterval。但是为了把它写成代码，我做了这个例子。此外，我将灯光放入对象中并使其更加紧凑。

/*
  neat light object
*/
function Light(color, element) {
  this.color = color;
  this.element = document.getElementById(element);
}
Light.prototype = {
  on: function() {
    this.element.style.backgroundColor = this.color;
  },
  off: function() {
    this.element.style.backgroundColor = "black";
  }
}

/*
init
*/
var lights = [new Light("green", "goLight"),
  new Light("orange", "slowLight"),
  new Light("red", "stopLight")
];

var sequence = [["green"],["green", "orange"],["red"]],
    position = 0,
    timer = null;

var go = document.getElementById("go"),
  stop = document.getElementById("stop");

go.onclick = function() {
  clearTimeout(timer);
  timer = setInterval(function() {

    lights.forEach(function(light) {
      if (sequence[position].indexOf(light.color) > -1) light.on();
      else light.off();
    });
    
     if (position++ >= sequence.length-1) position = 0;
   

  }, 2000);
}
stop.onclick = function() {
  clearTimeout(timer);
}

 body {
      font-family: sans-serif;
}

      #controlPanel {
      float: left;
      padding-top: 30px;
}

      .button {
      background-color: gray;
      color: white;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      margin: 90px 40px;
      cursor: pointer;
}

      #traffic-light {
     height: 550px;
      width: 200px;
      float: left;
      background-color: #333;
      border-radius: 40px;
      margin: 30px 0;
      padding: 20px;
}

      .bulb {
     height: 150px;
      width: 150px;
      background-color: #111;
      border-radius: 50%;
      margin: 25px auto;
      transition: background 500ms;
} 

    <div id="controlPanel">
        <h1 id="go" class="button">Go</h1>
        <h1 id="stop" class="button">Stop</h1>
    </div>
        <div id="traffic-light">
        <div id="stopLight" class="bulb"></div>
        <div id="slowLight" class="bulb"></div>
        <div id="goLight" class="bulb"></div>
    </div>