window.setTimeout

概要

指定された遅延の後に、コードの断片または関数を実行します。

構文

timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
timeoutID = window.setTimeout(code, delay);

• timeoutID : window.clearTimeout で使われる、数値の ID 。
• func : delay ミリ秒後に実行したい関数。
• code : delay ミリ秒後に実行したいコードの文字列(この書式は、 eval() を使うのと同様の理由で非推奨です)。
• delay : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。実際の呼び出しはこれより長くなる場合があります。

Internet Explorer では、最初の構文で関数に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、互換コードを使用してください。 (Callback arguments を参照)。

例

function generateOutput(aConcise) {
    if(aConcise) {
        parent.generateConciseOutput();
    } else {
        parent.generateOutput();
    }
}
window.setTimeout(generateOutput, 1000, true);  // IE では generateOutput に true が渡されない

// 関数式で互換性を向上させる
setTimeout(function() {
  generateOutput(true);
}, 1000);  // 全てのブラウザで動作

window.setTimeout("window.parent.generateOutput(true)", 1000);  // 非推奨

JSFiddle で確認

clearTimeout() の例も参照してください。

コールバック引数

Internet Explorer は、setTimeout() 、 setInterval() 共に、コールバック引数をサポートしていません。 コールバック関数に引数を渡す必要があり、追加の引数を Internet Explorer でも動作させる場合は、この IE 固有 の互換コードをあなたのコードの先頭に挿入してください。HTML5 標準の引数を渡す機能を、両方のタイマーで使用可能になります。

/*\
|*|
|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
|*|  callback functions of javascript timers (HTML5 standard syntax).
|*|
|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
|*|
|*|  Syntax:
|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
|*|  var timeoutID = window.setTimeout(code, delay);
|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
|*|  var intervalID = window.setInterval(code, delay);
|*|
\*/

if (document.all && !window.setTimeout.isPolyfill) {
  var __nativeST__ = window.setTimeout;
  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
    var aArgs = Array.prototype.slice.call(arguments, 2);
    return __nativeST__(vCallback instanceof Function ? function () {
      vCallback.apply(null, aArgs);
    } : vCallback, nDelay);
  };
  window.setTimeout.isPolyfill = true;
}

if (document.all && !window.setInterval.isPolyfill) {
  var __nativeSI__ = window.setInterval;
  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
    var aArgs = Array.prototype.slice.call(arguments, 2);
    return __nativeSI__(vCallback instanceof Function ? function () {
      vCallback.apply(null, aArgs);
    } : vCallback, nDelay);
  };
  window.setInterval.isPolyfill = true;
}

もう一つの方法は、コールバックに関数式を使用することです。この方法は少し多くコストがかかります。

var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);

this 問題

setTimeout() によって実行されるコードは、setTimeout() が呼び出された関数とは別の実行コンテキスト内で実行されます。結果的に、呼び出された関数の this キーワードは window (または global) オブジェクトに設定され、setTimeout が呼び出された関数の this 値と同じにはなりません。この問題は JavaScript リファレンス でより詳細に説明されています。

注記

window.clearTimeout() を使ってタイムアウトを中止することが出来ます。

もし関数を繰返し(即ち、N ミリ秒ごとに) 呼びたいなら、window.setInterval() を使うことを考慮してください。

文字列リテラルの使用

関数の代わりに、文字列を setTimeout() に渡すと、eval を使うのと同様の危険性があります。

// 正
window.setTimeout(function() {
    alert("Hello World!");
}, 500);

// 誤
window.setTimeout("alert(\"Hello World!\");", 500);

文字列はグローバルコンテキストで評価されます。そのため、setTimeout() が呼び出されたコンテキストのローカル変数は、文字列を評価したコードからは利用できません。

最小の遅延と setTimeout のネスト

歴史的にブラウザは setTimeout() に制限を課しています。「最小遅延」の制限より短い遅延で呼び出される、連続の setTimeout() は、少なくとも最小遅延を使用することになります。その最小遅延、DOM_MIN_TIMEOUT_VALUE は 4 ms (Firefox の dom.min_timeout_value の設定に保存されています) であり、DOM_CLAMP_TIMEOUT_NESTING_LEVEL は 5ms です。

実際、4ms は HTML5 の仕様で標準化されています。 そして、2010年以降にリリースされたブラウザ間で一貫しています。(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 以前では、ネストされた setTimeout の最小値は 10 ms でした。

この制限に加えて、ページ内、またはOSやブラウザ自身の他のタスクの処理に時間がかかると、setTimeout の呼び出しは遅れます。

0 ms タイマーをモダンブラウザで実装するには、ここで説明されている window.postMessage() を利用できます。

アクティブ状態でないタブ

(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) と Chrome 11 では、アクティブ状態でないタブでのタイマーの呼び出しは、一秒あたり一回までとなります。詳細は、Mozilla については バグ 633421 を、Chrome については crbug.com/66078 を参照してください。

ブラウザ実装状況

仕様

DOM0 の一部であり、HTML5 で標準化

関連情報

• window.setInterval
• window.requestAnimationFrame