更改圖片超時循環Javascript

Question

我有兩個圖像，綠色和黑色。我想以特定頻率交替這些圖像。 我的代碼：

<script> 
var wis=1; 
var delay=500; 
wissel() 
function wissel() { 
if (wis==1) 
    {wis=2; green();} 
else {wis=1; black();} 
delay=delay+500; 
setTimeout (wissel(), delay) 
} 

function green() { 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(438,398,125,0,2*Math.PI); 
ctx.arc(838,398,125,0,2*Math.PI); 
ctx.fillStyle="#00ff00"; 
ctx.fill(); 
} 
function black() { 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(438,398,128,0,2*Math.PI); 
ctx.arc(838,398,128,0,2*Math.PI); 
ctx.fillStyle="#000000"; 
ctx.fill(); 
} 
</script> 

當我插入延遲=延遲+ 500後面的警報（WIS）;它的工作原理。但我當然不想點擊。我想要它自動。我可以在這裏使用一些幫助。

Answer 1

您在撥打setTimeout時發生錯誤。刪除括號：

DEMO

var wis = 1; 
var delay = 500; 
wissel() 

function wissel() { 
    if (wis == 1) { 
     wis = 2; 
     green(); 
    } else { 
     wis = 1; 
     black(); 
    } 
    delay = delay + 500; 
    setTimeout(wissel, delay) 
} 

function green() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(438, 398, 125, 0, 2 * Math.PI); 
    ctx.arc(838, 398, 125, 0, 2 * Math.PI); 
    ctx.fillStyle = "#00ff00"; 
    ctx.fill(); 
} 

function black() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(438, 398, 128, 0, 2 * Math.PI); 
    ctx.arc(838, 398, 128, 0, 2 * Math.PI); 
    ctx.fillStyle = "#000000"; 
    ctx.fill(); 
}