遅延実行

Window.setTimeout()

Window.setTimeout()で、指定時間後に処理を実行できます。

timeoutID = window.setTimeout( code, delay )
window.setTimeout - Web API リファレンス | MDN

delayミリ秒後に実行される処理を、引数codeで関数または文字列で指定します。

関数による指定

引数を持たない場合は、関数名だけを指定します。

window.setTimeout( FunctionName, 10 );

引数を持つ場合は匿名関数を指定し、その匿名関数から引数をつけて関数を呼び出します。

window.setTimeout( function() { FunctionName(x) }, 10 );

関数内のthis

setTimeout()で呼び出される関数内のthisは、クラスのthisと同様のオブジェクトを参照します。

function Func() { alert( this ); }

Func();                                         // [object Window]
window.setTimeout( Func, 10 );                  // [object Window]
window.setTimeout( function() { Func() }, 10 ); // [object Window]

var obj = {};
obj.Func = function() { alert( this ); }

obj.Func();                                             // [object Object]
window.setTimeout( function() { obj.Func() }, 10 );     // [object Object]

window.setTimeout( obj.Func, 10 );                      // [object Window]
window.setTimeout( function() { alert( this ); }, 10 ); // [object Window]

var obj = {};
obj.Func = function()
{
    window.setTimeout( function() { alert( this ); }, 10 ); // [object Window]
}

obj.Func();

文字列リテラルよる指定

window.setTimeout( 'alert( "test" )', 10 );

関数を呼び出す場合は、その処理全体を文字列で指定します。

window.setTimeout( 'FunctionName(x)', 10 );

ただし文字列リテラルによる指定ではコードが最適化されないため、可能ならば関数による方法を用います。文字列リテラルの使用 - window.setTimeout - Web API インターフェイス | MDN

遅延時間の最小値と最大値

遅延できる時間には制約があり、つねに指定時間で実行されるわけではありません。まず最小の時間はブラウザによって制限されており、HTML5の仕様では4msとなっています。この値はFirefoxならば、about:configの[dom.min_timeout_value]の値で確認できます。

次に最大の時間は、2,147,483,647msまでとなっています。これはdelayが符号付きの32bit値で処理されるためで、この値はその型の最大値です。これを超える値を指定すると指定値がオーバーフローするため、たとえば(2,147,483,647 + 1)msは、0msの指定と同じ時間で実行されます。Minimum/ maximum delay and timeout nesting - window.setTimeout - Web API Interfaces | MDN

実行までに実際にかかった時間は、処理時間を計測する方法で次のように確認できます。

var start = new Date();
window.setTimeout( function()
    {
        var time = new Date() - start;
        alert( time + ' ms' );
    }, 100 )

イベントハンドラの実行やドキュメントの構築を待って実行する

待ち時間のdelayに0を指定することで、イベントハンドラの実行やドキュメントの構築を待って処理を実行できます。

window.setTimeout( FunctionName, 0 );

setTimeout()を使った便利なテクニックの1つに、0秒後に関数が呼び出されるようにする、というテクニックがあります。指定したコードはすぐに呼び出されるとは限りませんが、できるだけ早く実行されます。実際には、このような形式でsetTimeout()を呼び出すと、イベントハンドラの実行が完了し、ドキュメントの状態更新が終了した時点で、指定した関数が呼び出されます。

ドキュメントコンテンツを取得したり変更したりするイベントハンドラは、このテクニックを使って、ドキュメントが安定した状態になるまでコードの実行を遅らせる必要があります。

JavaScript 第5版 14.1 タイマー

window.setInterval()

指定時間後に処理を実行し、さらにそれをくり返させられます。

intervalID = window.setInterval( code, delay )
window.setInterval - Web API リファレンス | MDN

引数はsetTimeout()と同じです。くり返しを途中で止めるためには戻り値を保持しておき、clearInterval()を呼び出します。

window.clearInterval( intervalID )
window.clearInterval - Web API インターフェイス | MDN

ビジーウェイト (Busy Waiting)

独自に実装するならば、ループで待つ方法もあります。

ブラウザがクラッシュする恐れがあるため、使用には注意が必要です。

時間に正確さを求めないならば、単純にループさせることでも実現できます。

for( var i = 0; i < 1000; i++ );

より正確な時間を望むならば、Dateオブジェクトで時間を確認しながらループさせます。

function Sleep( milli_second )
{
    var start = new Date();
    while( new Date() - start < milli_second );
}

Sleep( 1000 ); // 1000ms待機

実際に要した時間は、処理時間を計測することで確認できます。

関連ページ

JavaScriptのドキュメントから検索