Javascript 如何在循环中处理setTimeout？_Javascript_Arrays_Loops_Wait

Javascript 如何在循环中处理setTimeout？

javascript arrays loops

Javascript 如何在循环中处理setTimeout？,javascript,arrays,loops,wait,Javascript,Arrays,Loops,Wait,我的目标是创造一个红绿灯。我想在显示红色和绿色图像后等待10秒，在显示橙色图像后等待2秒，循环遍历灯光的颜色（红色、橙色、绿色、橙色，然后再次返回红色）。这需要在没有用户输入的情况下循环为了实现等待，我尝试使用，但我的循环似乎没有运行 var trafficLights=[“RedLight.jpg”、“RedOrangelight.jpg”， “GreenLight.jpg”、“OrangeLight.jpg”]， waitTime=[“10000”、“2000”、“10000”、“200

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

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

var trafficLights=[“RedLight.jpg”、“RedOrangelight.jpg”，
“GreenLight.jpg”、“OrangeLight.jpg”]，
waitTime=[“10000”、“2000”、“10000”、“2000”]，
计数=0，
x=1；
while（x=1）{
设置超时（等待时间[计数]）；
document.getElementById（“红灯”）.src=trafficLights[count]；
计数+=1；
如果（计数=3）{
计数=0；
}
}

使用

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

我认为要让您走上正确的轨道，请尝试将

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>


var trafficLights=[“RedLight.jpg”、“RedOrangelight.jpg”、“GreenLight.jpg”、“OrangeLight.jpg]；
var waitTime=[10000,2000,10000,2000]；
计数=0；
x=1；
而（x==1）{
setTimeout（（）=>{}，waitTime[count]）；
document.getElementById（“红灯”）.src=trafficLights[count]；
计数+=1；
如果（计数==3）{
计数=0
};
};


图像
var elem=document.createElement（'img'）；
文件.正文.附件（elem）；
elem.style.cssText='宽度：640px；高度：360px；'；
var trafficLights=['RedLight.jpg'、'RedOrangelight.jpg'、'GreenLight.jpg'、'OrangeLight.jpg']，
waitTime=['10000'，'2000'，'10000'，'2000']，
i=0；
（功能fn（）
{
elem.src=交通灯[i]；
setTimeout（函数（）
{
i=（i+1）%waitTime.length；
fn（）
}，waitTime[i]）
}())

您可以执行以下操作：

函数运行灯（a，i=0）{
console.log（a[i].color）；
setTimeout（运行灯，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}]；
跑道灯（tl）X==1（比较）而不是X=1（赋值）检查：可能重复
<!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>