javascript - 更改图像超时循环 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> 

当我在 delay=delay+500 后面插入 alert(wis) 时；行它的工作原理。但我当然不想点击。我想要它自动。我可以在这里使用一些帮助。

Answer 1

你的setTimeout电话有误。去掉括号：

演示

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