★Webページ作成支援~Simple Style★

JavaScriptのタイマーsetInterval/setTimeout

指定時間ごとまたは、指定時間後に処理を行いたいときに使用します。
これは、JavaScriptのタイマー処理という処理で実装することができます。
タイマー処理にはsetIntervalとsetImeoutの2種類があります。
両者はとても似た関数ですが、少し挙動が異なります。

タイマーの設定/解除method

タイマーメソッド
setInterval 指定した関数を指定時間ごとに呼び出す。
clearInterval命令で解除しない限り呼び出しが中断されることはない。
setTimeout 指定した関数を指定時間後に1回だけ呼び出す。
指定した時間後に必ず呼び出される保証はない。
clearInterval setIntervalを解除する場合に使用する。
clearTimeout setTImeoutを解除する場合に使用する。


書式
timerID:タイマー変数(省略可)。
object:windowオブジェクト(ウィンドウ名、省略可)
funcname:JavaScriptの命令、関数function名。
msec:割り込み間隔。1/1000秒単位。1000で1秒。

timerID = object.setInterval( funcname, msec );
timerID = object.setTimeout( funcname, msec );
clearInterval( timerID );
clearTimeout( timerID );


Example
//関数myfuncを0.5秒ごとに呼び出す
timerID = window.setInterval( myfunc, 500 );

//関数myfuncを1秒後に呼び出す
timerID = window.setTimeout( myfunc, 1000 );

//setIntervalで指定したタイマーを解除する
clearInterval( timerID );

//setTimeoutで指定したタイマーを解除する
clearTimeout( timerID );

引数の記述方法

Internet Explorer10以降から、第3引数以降を使って関数に値を渡せるようになりました。
functionが引数をとる時は、以下のように指定します。
(以降は、setTimeoutのみで記述します。)
(Internet Explorer=IE)


書式
funcname:JavaScriptの命令、関数。
msec:割り込み間隔。1/1000秒単位。1000で1秒。
funcarg:関数の引数。
arg:タイマーの引数。[]は省略可

setTimeout( funcname, msec [, arg1, arg2, ...] );

無名関数の記述方法
setTimeout( function([funcarg1,funcarg2,...]){
  //処理
}, msec [, arg1, arg2, ...] );

以前のIEのマニュアル

以前のIEのマニュアルでは、以下のように書かれていました。

書式
timerID:タイマー変数(省略可)。
object:windowオブジェクト(ウィンドウ名、省略可)
code:文字列。指定されたインターバルで実行されるコード。
msec:割り込み間隔。1/1000秒単位。1000で1秒。

timerID = object.setTimeout( code, msec );

Example
timerID = setTimeout( 'myfunc()',1000 );

「setTimeout/setInterval(”関数名()”,割り込み時間)」と、関数名を文字列としていました。
「setTimeout/setInterval(文字列)」は、「eval(文字列)」と同様の処理をします。
文字列を解釈して、それを実行しています。
公式でevalが非推奨とあり、setTimeout/setInterval(文字列)についても非推奨です。
また、ブラウザのJSエンジンによって最適化されないので、低速になります。


IE9以前では、最初の構文で関数に渡す追加の引数は動作しません。同様の機能を実現させるには、以下のように記述します。
window.setTimeout( 'code('+arg1+','+arg2+')',msec );


記述例
Example
window.setTimeout("alert('Hello, world')", 1000);

Example
var Msg = "Hello, world";
window.setTimeout("alert(" + Msg + ")", 1000);


Tipseval()関数について

JavaScriptのeval(string)関数は、引数に指定した文字列をJavaScriptコード(JavaScriptの構文)として解釈し実行します。
string=式、文、または一連の文を表す文字列です。式には、既存オブジェクトの変数およびプロパティを含められます。


ラインを表示