JavaScriptのsetTimeout()のまとめ

JavaScriptのsetTimeout()のまとめ

Posted at August 22,2012 1:55 AM
Tag:[JavaScript]

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

setTimeout()

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

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

1.setTimeout()の機能は?

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

2.setTimeout()のパラメータは?

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

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

3.setTimeout()の返却値は?

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

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

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

4.具体的なコードは?

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

次のコードは、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)">

5.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();
});

6.繰り返し処理を止めるには?

止めたい時点でclearTimeout()を起動します。パラメータには2項に登場したタイマー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()が起動されるたびに値が変わるようです。

7.タイムアウト時間は厳密か?

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

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

8.setTimeout()とsetInterval()の違いは?

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

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

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)