javascript - 画像の変更 タイムアウト ループ Javascript

Question

緑と黒の2つの画像があります。これらの画像を特定の頻度で交互に表示したい。私のコード:

<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; の後ろにアラート (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();
}