setInterval / clearInterval

javascript
setInterval
インターバルタイマーを設定する。一定間隔で実行する処理を文字列で指定する。あと実行間隔（単位はミリ秒）も指定する。戻り値としてタイマー変数っていうのが返ってくる。
clearInterval
インターバルタイマーを解除する。引数にタイマー変数を指定する。
  • タイマーを再設定するときは一度解除してから設定しないといけない。

これと似ているのにsetTimeout / clearTimeoutというのがあるけど、こっちはインターバルタイマーじゃなくて単なるタイマーで、処理を一度だけ実行する時に使う。
写真のスライドショーみたいなのを作ってみました。

<html>
<head>
<title>setInterval</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script language="javascript">
<!--
var myImages = new Array(
    "/images/blank.gif",
    "/images/closelabel.gif",
    "/images/indicator.gif",
    "/images/next.gif",
    "/images/prev.gif",
    "/images/rss.gif",
    "/images/close.gif",
    "/images/image-1.jpg",
    "/images/loading.gif",
    "/images/nextlabel.gif",
    "/images/prevlabel.gif",
    "/images/thumb-1.jpg"
);
var index = 0;
var intervalTime = 1000;
var timer;
var isSliding;

function nextImage(image, caption) {
    if ( index >= myImages.length ) {
        index = 0;
    }
    document.getElementById(caption).innerHTML = myImages[index];
    document.getElementById(image).src = myImages[index++];
}

function startSlideShow() {
    timer = setInterval( "nextImage('imageBox', 'imageBoxCaption')", intervalTime );
    isSliding = 1;
    document.getElementById('slideState').innerHTML = "stop";
}

function stopSlideShow() {
    clearInterval(timer);
    isSliding = 0;
    document.getElementById('slideState').innerHTML = "start";
}

function setIntervalTime(time) {
    intervalTime = time;
}

function toggleSlideShow() {
    if ( isSliding ) {
        stopSlideShow();
    } else {
        startSlideShow();
    }
}

function restartSlideShow() {
    stopSlideShow();
    startSlideShow();
}

function changeSlideShowInterval(time) {
    setIntervalTime(time);
    restartSlideShow();
}

function onInit() {
    setIntervalTime(1000);
    startSlideShow();
}
// -->
</script>
</head>
<body onload="onInit()">

<form name="setIntervalForm" onsubmit="
changeSlideShowInterval(this.time.value);return false;
">
スライドショーの間隔を<input type="text" name="time" value="" size="20">ミリ秒に
<input type="submit" name="submit" value="変更する">
</form>

[<a href="javascript:toggleSlideShow()" id="slideState"></a>]
<p>
<img src="" id="imageBox" border="0" />
<div id="imageBoxCaption"></div>
</script>
</body>
</html>

http://takatoshi.dyndns.org/~takatoshi/learning/js/setinterval.html
昨日はJavaScriptが嫌いになりかけたけど今日は楽しかった。
関数をいくつか作っただけだけど、画像のパスリストとかスライドショーの間隔とかタイマー変数とか実行状態とか、いろいろと属性があるなーってことにも気づけたので、あと1歩踏み込めばこれをクラスにするのも簡単にできそうだし。