Wie behandelt man setTimeout in einer Schleife?

Mein Ziel ist es, eine Ampel zu erstellen. Ich möchte die Farben der Lichter durchlaufen (rot, orange, grün, orange, dann wieder auf rot) mit einer Wartezeit von 10 Sekunden, nachdem die roten und grünen Bilder angezeigt werden, und eine 2 Sekunden Wartezeit, nachdem das orange Bild angezeigt wird . Dies muss ohne Benutzereingaben durchgeschleift werden.Wie behandelt man setTimeout in einer Schleife?

Um die Wartezeit zu implementieren, habe ich versucht, setTimeout zu verwenden, aber meine Schleife scheint nicht zu laufen.

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">

Quelle

2017-03-12 Ronnie McTaggart

X == 1 (Vergleich) und nicht x = 1 (Zuordnung) in Ihrer während Definition –

prüft dies: http://stackoverflow.com/questions/42596128/traffic-light -using-javascript # comment72324549_42596128 – Abhitalks

Mögliche Duplikate von [Ampel mit Javascript] (http://stackoverflow.com/questions/42596128/traffic-light-using-javascript) – Abhitalks

Verwendung window.setInterval().

Sie können Ihre setInterval jede Sekunde auftreten lassen, und verfolgen Sie eine Variable, die Sie jede Sekunde erhöhen. Wenn der Wert 1 ist, ändern Sie das Bild in Rot. Wenn es 3 (zwei Sekunden später) ist, ändern Sie das Bild in Rot-Orange und so weiter. Und wenn der Wert 8 ist, setze ihn natürlich auf Null zurück.

Quelle

2017-03-12 17:28:02 jamjar

Ich denke, um Sie auf die richtige Spur zu bringen, versuchen Sie, die Elemente im waitTime Array zu ganzen Zahlen zu ändern. Verwenden Sie dann in Ihrer if-Anweisung ===, um auf Gleichheit zu prüfen. setTimeout nimmt auch zwei Argumente auf. Eine anonyme Funktion, dann Wartezeit. Im Allgemeinen würde ich Endlosschleifen vermeiden. Können Sie eine Ausgangsbedingung für die while Schleife machen? Werfen Sie einen Blick auf mein Code unten:

<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>

Quelle

2017-03-12 17:31:25

<!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>

Quelle

2017-03-12 17:56:36

Sie wie folgt tun können;

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);

Quelle

2017-03-12 20:07:52 Redu

Wie behandelt man setTimeout in einer Schleife?

Antwort

Verwandte Themen