第67回　「画像を定期的に点滅させる」

今回は画像を定期的に点滅させるプログラムについて説明します。
JavaScriptでは定期的な処理（タイマー処理）を行う命令が４つ用意されています。

●setTimeout
　指定された関数／命令を指定時間後に１回実行する

●setInterval
　指定された関数／命令を指定時間毎に実行する

●clearTimeout
　setTimeoutで指定されたタイマーをクリアする

●clearInterval
　setIntervalで指定されたタイマーをクリアする

　setTimeoutとclearTimeout、setIntervalとclearIntervalが、それぞれペアになっています。
　今回のように定期的に画像を点滅させる場合には、一度設定してしまえば定期的に実行するsetIntervalを使うと便利です。
　setIntervalは
　
timerID = setInterval(呼び出し関数・命令, 間隔)

　のように指定します。一度タイマーを設定し二度とクリアしないのであればtimerIDに代入する必要はなく
　
setInterval(呼び出し関数・命令, 間隔)

　のように書いても構いません。呼び出し関数名がabcであれば
　
setInterval("abc()", 間隔)

のように""で囲んで指定します。実行する間隔ですが「１秒＝１０００」となっています。つまり１秒ごとに関数abcを呼び出すには以下のように書きます。

setInterval("abc()", 1000)

　以下のプログラムが前回のプログラムを改良し0.5秒間隔で点滅するようにしたものです。

<html>
<head>
<title></title>
<style type="text/css"></style>
<script language="JavaScript"></script>
</head>
<body onLoad="setInterval('blinkImage()',500)">
<img src="photo1.jpg" id="myIMG">
</body>
</html>

　点滅方法ですが、現在の画像の表示状態を読み出して表示されていれば非表示、非表示であれば表示するようにしているだけです。改良すれば、もっと簡潔にすることも可能です。
　
　ついでにsetTimeoutを使った場合のサンプルも以下に示します。setIntervalと違い１度しか呼び出さないため関数内で毎回setTimeoutを実行する必要があります。
　
<html>
<head>
<title></title>
<style type="text/css"></style>
<script language="JavaScript"></script>
</head>
<body onLoad="setTimeout('blinkImage()',500)">
<img src="photo1.jpg" id="myIMG">
</body>
</html>

　次回は画像を定期的に移動させてみます。

第67回 「画像を定期的に点滅させる」

第67回　「画像を定期的に点滅させる」