Question

我的目标是创建一个红绿灯。我想循环显示灯光的颜色（红色，橙色，绿色，橙色，然后再回到红色），在显示红色和绿色图像后等待10秒钟，并在显示橙色图像后等待2秒钟。这需要在没有用户输入的情况下循环。

为了实现等待，我尝试使用setTimeout，但我的循环似乎没有运行。

var trafficLights = ["RedLight.jpg", "RedOrangelight.jpg",
      "GreenLight.jpg", "OrangeLight.jpg"],
    waitTime = ["10000", "2000", "10000", "2000"],
    count = 0,
    x = 1;
while (x=1) {
  setTimeout(waitTime[count]);
  document.getElementById("RedLight").src = trafficLights[count];
  count += 1;
  if (count = 3) {
    count = 0;
  }
}

<img id="RedLight" src="RedLight.jpg">

Answer 1

使用window.setInterval()。

您可以每秒发生一次setInterval，并跟踪每秒递增的变量。如果值为1，则将图像更改为红色。如果是3（两秒钟后），请将图像更改为红橙色，依此类推。当然，当值为8时，将其重置为零。

Answer 2

我认为为了让您走上正轨，请尝试将waitTime数组中的项目更改为整数。然后，在if语句中，使用===检查是否相等。 setTimeout也有两个参数。一个匿名函数，然后等待时间。一般来说，我会避免无限循环。你能为while循环做出退出条件吗？看看下面的代码：

<script>
var trafficLights = ["RedLight.jpg", "RedOrangelight.jpg", "GreenLight.jpg", "OrangeLight.jpg"];
var waitTime = [10000, 2000, 10000, 2000];
count = 0;
x=1;
while (x === 1) {
setTimeout(() => {}, waitTime[count]);
document.getElementById("RedLight").src= trafficLights[count];
count+=1;
if (count === 3){
    count = 0
    };
};
</script>

Answer 3

<!DOCTYPE html>
<html>
<head>
    <title> Images </title>
    <meta charset="utf-8">
</head>
<body>
<script>

var elem = document.createElement('img');
document.body.appendChild(elem);
elem.style.cssText = 'width: 640px; height:360px;';

var trafficLights = ['RedLight.jpg', 'RedOrangelight.jpg', 'GreenLight.jpg', 'OrangeLight.jpg'],
    waitTime = ['10000', '2000', '10000', '2000'],
    i = 0;

(function fn()
{
    elem.src = trafficLights[i];
    setTimeout( function()
    {
        i = ( i + 1 ) % waitTime.length;
        fn()
    }, waitTime[ i ] )
}())



</script>
</body>
</html>

Answer 4

您可以执行以下操作;

function runLights(a, i = 0){
  console.log(a[i].color);
  setTimeout(runLights, a[i].dur, a, ++i%a.length);
}

var tl = [{color: "red", dur: 1000}, {color: "yellow", dur: 200}, {color: "green", dur: 1000}, {color: "yellow", dur: 200}];
runLights(tl);

如何在循环中处理setTimeout？

4 个答案: