ループ内でsetTimeoutを処理する方法は？

私の目標は、交通信号を作成することです。赤と緑の画像が表示されてから10秒待って、橙色の画像が表示されてから2秒待って、ライトの色（赤、オレンジ、緑、オレンジ、次に赤に戻ります）。これは、ユーザー入力なしでループする必要があります。ループ内でsetTimeoutを処理する方法は？

待機を実装するには、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">

出典

2017-03-12 Ronnie McTaggart

X == 1（比較）及びませんが、X = 1（割り当て） –

チェックこの：http://stackoverflow.com/questions/42596128/traffic-light -using-javascript＃comment72324549_42596128 – Abhitalks

[トラフィック光のjavascriptを使用する]の可能な複製（http://stackoverflow.com/questions/42596128/traffic-light-using-javascript） – Abhitalks

使用window.setInterval()。

毎秒setIntervalを発生させ、1秒ごとに増加する変数を追跡することができます。値が1の場合は、イメージを赤に変更します。 3（2秒後）の場合は、イメージを赤橙色に変更します。もちろん、値が8のときはゼロにリセットします。

出典

2017-03-12 17:28:02 jamjar

正しい軌道に乗るためには、waitTimeの配列を整数に変更してみてください。次に、ifステートメントで、===を使用して、等しいかどうかを確認します。 setTimeoutにも2つの引数があります。無名関数です。その後、時間を待ちます。一般的に、私は無限ループを避けるでしょう。 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>

出典

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>

出典

2017-03-12 17:56:36

次のようにあなたが行うことができます。あなたの中の定義で

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

出典

2017-03-12 20:07:52 Redu

ループ内でsetTimeoutを処理する方法は？

答えて

関連する問題