window.setTimeout

  • リビジョンの URL スラッグ: Web/API/window.setTimeout
  • リビジョンのタイトル: window.setTimeout
  • リビジョンの ID: 409481
  • 作成日:
  • 作成者: ethertank
  • 現行リビジョン いいえ
  • コメント Moved From DOM/window.setTimeout to Web/API/window.setTimeout

このリビジョンの内容

{{DomRef}}

概要

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

構文

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 を参照)。

注記: Gecko 13 {{geckoRelease("13.0")}} 以前では、 Gecko はコールバック関数に、ミリ秒単位での setTimeout の「実際の遅れ」を表す、追加の引数を渡していました。この非標準の引数は、現在は渡されません。

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);  // 非推奨

{{JSFiddleLink("madBYK/BjjBc")}}

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年以降にリリースされたブラウザ間で一貫しています。{{geckoRelease("5.0")}} 以前では、ネストされた setTimeout の最小値は 10 ms でした。

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

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

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

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

ブラウザ実装状況

{{CompatibilityTable}}
機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 {{CompatGeckoDesktop("1")}} 4.0 4.0 1.0
コールバック関数 *1 の引数のサポート {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatUnknown}}
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 1.0 1.0 {{CompatGeckoMobile("1")}} 6.0 6.0 1.0
コールバック関数 *1 の引数のサポート {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

仕様

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

関連情報

  • {{domxref("window.setInterval")}}
  • {{domxref("window.requestAnimationFrame")}}

このリビジョンのソースコード

<div>
  {{DomRef}}</div>
<h2 id="Summary" name="Summary">概要</h2>
<p>指定された遅延の後に、コードの断片または関数を実行します。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox">
<var>timeoutID</var> = window.setTimeout(<var>func</var>, <var>delay</var>[, <var>param1</var>, <var>param2</var>, ...]);
<var>timeoutID</var> = window.setTimeout(<var>code</var>, <var>delay</var>);
</pre>
<ul>
  <li><code>timeoutID</code> : <a href="/ja/docs/DOM/window.clearTimeout">window.clearTimeout</a> で使われる、数値の ID 。</li>
  <li><code>func</code> : <code>delay</code> ミリ秒後に実行したい<a href="/ja/docs/JavaScript/Reference/Global_Objects/Function">関数</a>。</li>
  <li><code>code</code> : <code>delay</code> ミリ秒後に実行したいコードの文字列(この書式は、 <a href="/ja/docs/JavaScript/Reference/Global_Objects/eval#Don%27t_use_eval!" title="JavaScript/ Reference/Global Functions/Eval#Don't use eval!">eval()</a> を使うのと同様の理由で<strong>非推奨</strong>です)。</li>
  <li><code>delay</code> : 関数呼び出しを遅延させるミリ秒(1/1000 秒)。実際の呼び出しはこれより長くなる場合があります。</li>
</ul>
<p>Internet Explorer では、最初の構文で関数に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、互換コードを使用してください。 (<a href="#Callback_arguments">Callback arguments</a> を参照)。</p>
<div class="note">
  <strong>注記:</strong> Gecko 13 {{geckoRelease("13.0")}} 以前では、 Gecko はコールバック関数に、ミリ秒単位での setTimeout の「実際の遅れ」を表す、追加の引数を渡していました。この非標準の引数は、現在は渡されません。</div>
<h2 id="Examples" name="Examples">例</h2>
<pre class="brush:js">
function generateOutput(aConcise) {
    if(aConcise) {
        parent.generateConciseOutput();
    } else {
        parent.generateOutput();
    }
}
window.setTimeout(generateOutput, 1000, true);  // IE では generateOutput に true が渡されない
</pre>
<pre class="brush:js">
// 関数式で互換性を向上させる
setTimeout(function() {
  generateOutput(true);
}, 1000);  // 全てのブラウザで動作
</pre>
<pre class="brush:js">
window.setTimeout("window.parent.generateOutput(true)", 1000);  // 非推奨
</pre>
<p>{{JSFiddleLink("madBYK/BjjBc")}}</p>
<p><a href="/ja/docs/DOM/window.clearTimeout#Example">clearTimeout() の例</a>も参照してください。</p>
<h2 id="Callback_arguments" name="Callback_arguments">コールバック引数</h2>
<p>Internet Explorer は、<code>setTimeout()</code> 、 <code>setInterval()</code> 共に、コールバック引数をサポートしていません。 コールバック関数に引数を渡す必要があり、追加の引数を Internet Explorer でも動作させる場合は、この <em>IE 固有</em> の互換コードをあなたのコードの先頭に挿入してください。HTML5 標準の引数を渡す機能を、両方のタイマーで使用可能になります。</p>
<pre class="brush:js">
/*\
|*|
|*|  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 &amp;&amp; !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 &amp;&amp; !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;
}
</pre>
<p>もう一つの方法は、コールバックに関数式を使用することです。この方法は少し多くコストがかかります。</p>
<pre class="brush:js">
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
</pre>
<h2 id="The_.22this.22_problem" name="The_.22this.22_problem">this 問題</h2>
<p><code>setTimeout()</code> によって実行されるコードは、<code>setTimeout()</code> が呼び出された関数とは別の実行コンテキスト内で実行されます。結果的に、呼び出された関数の <code>this</code> キーワードは <code>window</code> (または <code>global</code>) オブジェクトに設定され、<code>setTimeout</code> が呼び出された関数の <code>this</code> 値と同じにはなりません。この問題は <a href="/ja/docs/JavaScript/Reference/Operators/Special_Operators/this_Operator#Method_binding">JavaScript リファレンス</a> でより詳細に説明されています。</p>
<h2 id="Notes" name="Notes">注記</h2>
<p><code><a href="/ja/docs/DOM/window.clearTimeout">window.clearTimeout()</a></code> を使ってタイムアウトを中止することが出来ます。</p>
<p>もし関数を繰返し(即ち、N ミリ秒ごとに) 呼びたいなら、<code><a href="/ja/docs/DOM/window.setInterval">window.setInterval()</a></code> を使うことを考慮してください。</p>
<h3 id="Passing_string_literals" name="Passing_string_literals">文字列リテラルの使用</h3>
<p>関数の代わりに、文字列を <code>setTimeout()</code> に渡すと、<code><a href="/ja/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21" title="https://developer.mozilla.org/ja/docs/JavaScript/Reference/Global_Objects/eval">eval</a></code> を使うのと同様の危険性があります。</p>
<pre class="brush:js">
// 正
window.setTimeout(function() {
    alert("Hello World!");
}, 500);

// 誤
window.setTimeout("alert(\"Hello World!\");", 500);</pre>
<p>文字列はグローバルコンテキストで評価されます。そのため、<code>setTimeout()</code> が呼び出されたコンテキストのローカル変数は、文字列を評価したコードからは利用できません。</p>
<h3 id="Minimum_delay_and_timeout_nesting" name="Minimum_delay_and_timeout_nesting">最小の遅延と setTimeout のネスト</h3>
<p><a href="http://code.google.com/p/chromium/issues/detail?id=792#c10" title="http://code.google.com/p/chromium/issues/detail?id=792#c10">歴史的に</a>ブラウザは <code>setTimeout()</code> に制限を課しています。「最小遅延」の制限より短い遅延で呼び出される、連続の <code>setTimeout()</code> は、少なくとも最小遅延を使用することになります。その最小遅延、<code>DOM_MIN_TIMEOUT_VALUE</code> は 4 ms (Firefox の <code>dom.min_timeout_value</code> の設定に保存されています) であり、<code>DOM_CLAMP_TIMEOUT_NESTING_LEVEL</code> は 5ms です。</p>
<p>実際、4ms は <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/timers.html#timers"> HTML5 の仕様で標準化されています。</a> そして、2010年以降にリリースされたブラウザ間で一貫しています。{{geckoRelease("5.0")}} 以前では、ネストされた setTimeout の最小値は 10 ms でした。</p>
<p>この制限に加えて、ページ内、またはOSやブラウザ自身の他のタスクの処理に時間がかかると、setTimeout の呼び出しは遅れます。</p>
<p>0 ms タイマーをモダンブラウザで実装するには、<a href="http://dbaron.org/log/20100309-faster-timeouts" title="http://dbaron.org/log/20100309-faster-timeouts">ここで説明されている</a> {{domxref("window.postMessage()")}} を利用できます。</p>
<h3 id="Inactive_tabs" name="Inactive_tabs">アクティブ状態でないタブ</h3>
<p>{{geckoRelease("5.0")}} と Chrome 11 では、アクティブ状態でないタブでのタイマーの呼び出しは、一秒あたり一回までとなります。詳細は、Mozilla については {{bug(633421)}} を、Chrome については <a href="http://crbug.com/66078" title="http://crbug.com/66078">crbug.com/66078</a> を参照してください。</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1")}}</td>
        <td>4.0</td>
        <td>4.0</td>
        <td>1.0</td>
      </tr>
      <tr>
        <td>コールバック関数 *1 の引数のサポート</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>1.0</td>
        <td>1.0</td>
        <td>{{CompatGeckoMobile("1")}}</td>
        <td>6.0</td>
        <td>6.0</td>
        <td>1.0</td>
      </tr>
      <tr>
        <td>コールバック関数 *1 の引数のサポート</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Specification" name="Specification">仕様</h2>
<p>DOM0 の一部であり、<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#timers">HTML5</a> で標準化</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
  <li>{{domxref("window.setInterval")}}</li>
  <li>{{domxref("window.requestAnimationFrame")}}</li>
</ul>
Revert to this revision