交通灯序列 Javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36920320/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Traffic light Sequence Javascript
提问by K. Smith
Here is my code for a traffic light's sequences. I was wondering how I could add a timer in to change the traffic light colour every 3 seconds, for example, when the button is clicked. Thanks!
这是我的交通灯序列代码。我想知道如何添加一个计时器来每 3 秒更改一次交通灯颜色，例如，当单击按钮时。谢谢！
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Task 3</h1>
<p>This is my Traffic Light script</p>
<img id="light" src="./assets/red.jpg">
<button type="button" onclick="changeLights()">Change Lights</button>
<script>
var list = ["./assets/red.jpg","./assets/redamber.jpg", "./assets/green.jpg","./assets/amber.jpg" ];
var index = 0;
function changeLights() {
index = index + 1;
if (index == list.length)
index = 0;
var image = document.getElementById('light');
image.src = list[index];
}
</script>
</body>
</html>
回答by Wowsk
Use the setIntervalfunction.
使用该setInterval功能。
The first parameter is the function you want to call and the second parameter is how often it should be called, in milliseconds.
第一个参数是您要调用的函数，第二个参数是应调用的频率，以毫秒为单位。
var timer = setInterval(changeLights,3000);
var list = ["./assets/red.jpg","./assets/redamber.jpg", "./assets/green.jpg","./assets/amber.jpg" ];
var index = 0;
function changeLights() {
index = index + 1;
if (index == list.length)
index = 0;
var image = document.getElementById('light');
image.src=list[index]; }
var timer = setInterval(changeLights,3000);<h1>JavaScript Task 3</h1>
<p>This is my Traffic Light script</p>
<img id="light" src="./assets/red.jpg"> <button type="button"
onclick="changeLights()">Change Lights</button> 回答by Richard Kille
You can set a static timer with setTimeout(function, time);
您可以使用 setTimeout(function, time); 设置静态计时器；
In your case, if you want a repeating timer every 3 seconds constantly, you can have setTimeout run every time the changeLights() function ends
在您的情况下，如果您想要每 3 秒不断重复一个计时器，您可以在每次 changeLights() 函数结束时运行 setTimeout
See w3schools article on timing
var timer;
function changeLights() {
index = index + 1;
if (index == list.length)
index = 0;
var image = document.getElementById('light');
image.src=list[index];
timer = setTimeout("changeLights", 3000);
}
With that change, once you start the lights, the function will repeat every 3 seconds.
有了这个变化，一旦你启动灯，该功能将每 3 秒重复一次。
The timer variable also alows you to stop the timer (perhaps in your case with another button) with:
timer 变量还允许您通过以下方式停止计时器（可能在您的情况下使用另一个按钮）：
clearTimeout(timer);
Hope this helps
希望这可以帮助
