小粋空間  -  a cheap joke and a play on words site

JavaScriptのsetTimeout()のまとめ

JavaScriptのsetTimeout()の使い方についてまとめてみました。

まとめているのは基本的なことのみですので、さらに詳しい内容については参考記事等を参照願います。

認識誤りがありましたらどこかでつぶやいてください。

１．setTimeout()の機能は？

タイムアウトした時点で、パラメータに指定した処理を1度だけ実行させるための関数です。

２．setTimeout()のパラメータは？

第1パラメータに起動したい処理または関数、第2パラメータにタイムアウト時間（＝第1パラメータで指定した関数または処理を起動させるまでの待ち時間）をミリ秒で指定します。

setTimeout( 起動したい処理または関数, タイムアウト時間 );

３．setTimeout()の返却値は？

タイマーIDが返却されます。タイマーIDは単なる整数です。

var timer_id = setTimeout( 起動関数, タイムアウト時間 );

1度だけ実行する場合、タイマーIDを使うことはありませんが、後述する繰り返し実行を止めるときに、このタイマーIDが必要になります。

４．具体的なコードは？

サンプルを作ってみました。

次のコードは、3000ミリ秒（3秒）後にfoo()を1度だけ起動します。

var foo = function(){
    alert("OK");
};
setTimeout( "foo()", 3000 );

関数の部分は「function(){}」で括ることもできます。

var foo = function(){
    alert("OK");
};
setTimeout( function(){ foo() }, 3000 );

onclickイベントなどにも記述できます。

<input type="button" value="send"  onclick="setTimeout('foo()', 3000)">

５．setTimeout()を繰り返し実行するには？

関数の中でsetTimeout()を起動し、第1パラメータに自関数を記述します。

次の例は、3秒周期で繰り返しfoo()を起動します。

var foo = function(){
    setTimeout( "foo()", 3000 );
};
foo();

setTimeout()の前後にコードを記述した場合、どちらもすぐに実行されます。

なお、IE系ではエラーになるという情報があったので、次のようにwindow.onloadイベントで起動させた方がいいかもしれません（拾ってきた情報が古いかもしれません）。

var foo = function(){
    setTimeout( "foo()", 3000 );
};
window.onload = foo;

window.onloadイベントの代わりにjQueryでもいいと思います。

var foo = function(){
    setTimeout( "foo()", 3000 );
};
$(function(){
    foo();
});

６．繰り返し処理を止めるには？

止めたい時点でclearTimeout()を起動します。パラメータには２項に登場したタイマーIDを指定します。

clearTimeout( タイマーID );

止め方はいろいろあると思いますが、たとえば次のようにします。

var timer_id;
var counter = 0;
var foo = function(){
    counter++;
    timer_id = setTimeout( "foo()", 3000 );
    if ( counter > 5 ) {
        clearTimeout( timer_id );
    }
};
foo();

ちなみにタイマーIDはsetTimeout()が起動されるたびに値が変わるようです。

７．タイムアウト時間は厳密か？

厳密ではないようです。詳細は下記の記事が参考になると思います。

JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念 - IT戦記

８．setTimeout()とsetInterval()の違いは？

setTimeout()の第2パラメータには起動するまでの待機時間を指定しますが、setInterval()の第2パラメータには起動間隔を指定します。

よって、setInterval()は他の処理とは無関係に、周期的に起動されます。