画像を５回点滅させる

Question

ボタンをクリックしたら画像を５回点滅させたいのですが、うまくいきません。
画像が消えるだけで点滅にもなっていません。

下記がコードです。

window.onload = function(){
var timer1;

btn.onclick = function(){
    for(i=0;i<=4;i++){
        tmstr();
    }
}

}

function a(){
var flga = document.getElementById("a_img").style.visibility;
if(flga == "visible")
{
document.getElementById("a_img").style.visibility = "hidden";
}else{
document.getElementById("a_img").style.visibility = "visible";
clearInterval(timer1);
}
}
function tmstr(){

timer1 = setInterval("a()",100);

}

何がいけないのでしょうか？
まだ、初心者なので初歩的なことかもしれませんがよろしくお願いします。

Answer 1

tmstr関数は a関数を 0.1秒ごとに実行するよう予約する関数です。
それを5回実行したところで、平均して0.02秒に1回切り替えが行われるようになるだけです。
a関数の中にclearIntervalが書かれていますが、ここでストップするのはこの行に到達していた時点で timer1に格納されているIDを持つ処理のみです。

CSS Animationのfrom, toとanimation-iteration-countを知ると、動く環境は制限されますが、すべてをJavaScriptに頼らなくても同じことを実現できます。
JavaScriptのみで実現したいのであれば、setTimeoutの方が目的に近いと思います。その上で0.1秒経過して #a_img のスタイルが変化したことを呼び出し元にも通知する手段が必要です。

ところであなたのコードですと、変数 i にvarがついていませんね。

Comments

[HirokiNakajima]

htsing様
回答ありがとうございます。
参考にさせていただきます。