JavaScript

setTimeout

　指定した時間後に処理を実行するタイマーをセットする。指定した処理を一度だけ実行した場合に使用する。

　setTimeout() でタイマーをセット時にタイマー変数を設定、そのタイマー変数を使用して clearTimeout() でタイマーをクリアする。タイマー変数を設定しない場合は、タイマーは解除できない。

　タイマーを解除しないまま再びタイマーを作動させると正常に動作しなくなる。

　setTimeout() でセットしたタイマーを解除するのは clearTimeout() でなければならず、clearInterval() では解除できない。

　処理を一定時間ごとに繰り返し実行したい場合は setInterval() を使用する。


myTimer = setTimeout("myFunc()", 20000);
// タイマー変数を myTimer としてタイマーをセット。関数 myFunc() を20秒後に実行。

clearTimeout(myTimer);
// タイマー変数 myTimer のタイマーを解除。

　Webを見ていて、スライドショーなど、一定時間ごとに画像や文字が切り替わったりする動的な動きを見たことがあるのではないでしょうか。

　これは、JavaScriptのタイマー処理という処理で実装することができます。

　タイマー処理には setInterval と setTimeout の２種類があります。両者はとても似た関数ですが、少し挙動が異なります。

　どちらも基本的なプログラムは次のようになります。


setInterval(関数function, 一定時間の指定[, 引数1, 引数2, ...])
setTimeout(関数function, 一定時間の指定[, 引数1, 引数2, ...])

　function は関数の定義、コンマで区切って一定時間の指定（ミリ秒）、function が引数をとる場合には [ ] の中で指定します。

※注意：setInterval の「 I 」、setTimeout の「 T 」は大文字で記述しましょう。小文字で書くとプログラムが実行されません。

　Sample page では、「5秒後にこのページにジャンプする設定」にしてあります。

HTML source


<body onLoad="setTimeout('movePage()', 5000)">

　body 要素に onLoad を設定し、ページを読み込んだら movePage() 関数を実行するようにしています。

JavaScript source


function movePage() {
	location.href = "settimeout.html";
}

　ページをジャンプする関数 movePage() を定義し、setTimeout() でページを読み込んだ5秒後に実行する。