我如何在JavaScript中循環我的程序的定時序列

我已經制作了一個程序來顯示紅綠燈，按下按鈕時顏色會改變。我不知道如何爲此添加定時序列，任何人都可以幫忙嗎？我的任務是允許序列在定時器上沒有任何用戶輸入的情況下繼續。我如何在JavaScript中循環我的程序的定時序列

這是我原來的計劃

<!DOCTYPE html> 
<html> 
<body> 
    <h1>Task 3</h1> 
    <p>Traffic Light</p> 
    <img id="light" src="./assets/red.jpg"> 
    <button type="button" onclick="changeLights()">Change</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>

我看着計時事件，並試圖使用的setTimeout（）函數，但是這一切確實是每一個按鈕被按下的時間後增加的延遲。

<!DOCTYPE html> 
<html> 
<body> 
    <h1>Task 3</h1> 
    <p>Traffic Light</p> 
    <img id="light" src="./assets/red.jpg"> 
    <button onclick="setTimeout(changeLights, 3000);">Try it</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>

我是JavaScript新手，我不知道從哪裏開始，所以我非常感謝幫助。

來源

2016-12-14 cianhughes

我的任務是允許序列在定時器上沒有任何用戶輸入的情況下繼續。

您需要使用setInterval(func|code, delay)

刪除此行

<button onclick="setTimeout(changeLights, 3000);">Try it</button>

並在腳本

setInterval(changeLights, 3000);

setInterval添加這是用來當過你想無限運行功能之後每隔012毫秒。

來源

2016-12-14 10:05:43

感謝您的幫助，這工作就像一個魅力！ – cianhughes

@ cianhughes很高興幫助:) –

你可以試試這個

<button onclick="setInterval(changeLights, 3000);">Try it</button>

來源

2016-12-14 10:08:33

謝謝，這工作 – cianhughes

也許你的意思是使用setInterval（）函數來代替的setTimeout（）。

來源

2016-12-14 10:17:17

是的，這工作謝謝 – cianhughes

我如何在JavaScript中循環我的程序的定時序列

回答

相關問題