WindowOrWorkerGlobalScope ミックスインの setInterval() メソッドは、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。これは、インターバルを一意に識別する interval ID を返します。よって clearInterval() を呼び出して、後でインターバルを削除できます。このメソッドは Window および Worker インターフェイスで提供します。

構文

var intervalID = scope.setInterval(func, delay[, param1, param2, ...]);
var intervalID = scope.setInterval(code, delay);

引数

func
ミリ秒単位の delay が経過するたびに実行する 関数 です。関数には引数が渡されず、また戻り値を想定していません。
code
関数の代わりに文字列を含める構文も許容されており、ミリ秒単位の delay が経過するたびに文字列をコンパイルして実行します。eval() の使用にリスクがあるのと同じ理由で、この構文は 推奨しません
delay
指定した関数またはコードを実行する前にタイマーが待つべき時間をミリ秒 (1/1000 秒) 単位で指定します。引数が 10 より小さい場合は、10 を使用します。実際の遅延が長くなることがあります。例えば "遅延が指定値より長い理由" in undefined をご覧ください。
param1, ..., paramN Optional
タイマーが満了したときに、func で指定した関数に渡す追加の引数です。

注記: Internet Explorer 9 およびそれ以前のバージョンでは、最初の構文で関数に渡す追加の引数は動作しないことに注意してください。同様の機能を実現させるには、ポリフィルを使用してください。(コールバックの引数 を参照)。

戻り値

戻り値 intervalID は、setInterval() を呼び出して作成したタイマーを識別する、0 ではない正の整数値です。この値は、インターバルをキャンセルするために WindowOrWorkerGlobalScope.clearInterval() へ渡すことができます。

setInterval()setTimeout() は同じ ID プールを共有しており、さらに clearInterval()clearTimeout() は技術的に入れ替えて使用できることを意識すると役に立つでしょう。ただし明快さのために、コードを整備するときは混乱を避けるため、常に一致させるようにするべきです。

注記: 引数 delay は、符号付き 32 ビット整数に変換されます。IDL における符号付き整数の定義によって、delay は事実上 2147483647ms に制限されます。

例 1: 基本的な構文

以下の例は、関数の基本的な構文を示します。

var intervalID = window.setInterval(myCallback, 500);

function myCallback() {
  // Your code here
}

例 2: 2 つの色を切り替える

以下の例は停止ボタンを押すまで、1 秒おきに flashtext() 関数を呼び出します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>setInterval/clearInterval example</title>

  <script>
    var nIntervId;
 
    function changeColor() {
      nIntervId = setInterval(flashText, 1000);
    }
 
    function flashText() {
      var oElem = document.getElementById('my_box');
      oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
    }
 
    function stopTextColor() {
      clearInterval(nIntervId);
    }
  </script>
</head>
 
<body onload="changeColor();">
  <div id="my_box">
    <p>Hello World</p>
  </div>

  <button onclick="stopTextColor();">Stop</button>
</body>
</html>

例 3: タイプライターのシミュレーション

以下の例は始めに何もない状態から、指定したセレクターのグループにマッチする NodeList へ徐々にコンテンツを入力することによってタイプライターを模倣します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript Typewriter - MDN Example</title>
<script>
  function Typewriter (sSelector, nRate) {

  function clean () {
    clearInterval(nIntervId);
    bTyping = false;
    bStart = true;
    oCurrent = null;
    aSheets.length = nIdx = 0;
  }

  function scroll (oSheet, nPos, bEraseAndStop) {
    if (!oSheet.hasOwnProperty('parts') || aMap.length < nPos) { return true; }

    var oRel, bExit = false;

    if (aMap.length === nPos) { aMap.push(0); }

    while (aMap[nPos] < oSheet.parts.length) {
      oRel = oSheet.parts[aMap[nPos]];

      scroll(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;

      if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
        bExit = true;
        oCurrent = oRel.ref;
        sPart = oCurrent.nodeValue;
        oCurrent.nodeValue = '';
      }

      oSheet.ref.appendChild(oRel.ref);
      if (bExit) { return false; }
    }

    aMap.length--;
    return true;
  }

  function typewrite () {
    if (sPart.length === 0 && scroll(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; }

    oCurrent.nodeValue += sPart.charAt(0);
    sPart = sPart.slice(1);
  }

  function Sheet (oNode) {
    this.ref = oNode;
    if (!oNode.hasChildNodes()) { return; }
    this.parts = Array.prototype.slice.call(oNode.childNodes);

    for (var nChild = 0; nChild < this.parts.length; nChild++) {
      oNode.removeChild(this.parts[nChild]);
      this.parts[nChild] = new Sheet(this.parts[nChild]);
    }
  }

  var
    nIntervId, oCurrent = null, bTyping = false, bStart = true,
    nIdx = 0, sPart = "", aSheets = [], aMap = [];

  this.rate = nRate || 100;
 
  this.play = function () {
    if (bTyping) { return; }
    if (bStart) {
      var aItems = document.querySelectorAll(sSelector);

      if (aItems.length === 0) { return; }
      for (var nItem = 0; nItem < aItems.length; nItem++) {
        aSheets.push(new Sheet(aItems[nItem]));
        /* Uncomment the following line if you have previously hidden your elements via CSS: */
        // aItems[nItem].style.visibility = "visible";
      }

      bStart = false;
    }

    nIntervId = setInterval(typewrite, this.rate);
    bTyping = true;
  };
 
  this.pause = function () {
    clearInterval(nIntervId);
    bTyping = false;
  };
 
  this.terminate = function () {
    oCurrent.nodeValue += sPart;
    sPart = "";
    for (nIdx; nIdx < aSheets.length; scroll(aSheets[nIdx++], 0, false));
    clean();
  };
}
 
/* usage: */
var oTWExample1 = new Typewriter(/* elements: */ '#article, h1, #info, #copyleft', /* frame rate (optional): */ 15);
 
/* default frame rate is 100: */
var oTWExample2 = new Typewriter('#controls');

/* you can also change the frame rate value modifying the "rate" property; for example: */
// oTWExample2.rate = 150;
 
onload = function () {
  oTWExample1.play();
  oTWExample2.play();
};
</script>
<style type="text/css">
span.intLink, a, a:visited {
  cursor: pointer;
  color: #000000;
  text-decoration: underline;
}
 
#info {
  width: 180px;
  height: 150px;
  float: right;
  background-color: #eeeeff;
  padding: 4px;
  overflow: auto;
  font-size: 12px;
  margin: 4px;
  border-radius: 5px;
  /* visibility: hidden; */
}
</style>
</head>
 
<body>

<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p>
<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.play();">Play</span> | <span class="intLink" onclick="oTWExample1.pause();">Pause</span> | <span class="intLink" onclick="oTWExample1.terminate();">Terminate</span>&nbsp;]</p>
<div id="info">
Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
</div>
<h1>JavaScript Typewriter</h1>
 
<div id="article">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
<form>
<p>Phasellus ac nisl lorem: <input type="text" /><br />
<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p>
<p><input type="submit" value="Send" />
</form>
<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p>
<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
</div>
</body>
</html>

View this demo in action. See also: clearInterval().

コールバックの引数

前述のとおり、Internet Explorer 9 およびそれ以前は、setTimeout()setInterval() でコールバック関数に引数を渡す機能をサポートしません。以下の IE 専用 コードは、この制限を克服する方法を説明します。使用方法は、スクリプトの先頭に以下のコードを追加するだけです。

/*\
|*|
|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
|*|  callback functions of javascript timers (HTML5 standard syntax).
|*|
|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  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;
}

Another possibility is to use an anonymous function to call your callback, although this solution is a bit more expensive. 例えば:

var intervalID = setInterval(function() { myFunc('one', 'two', 'three'); }, 1000);

さらに、関数の bind を使用する方法もあります。例えば:

var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);

非アクティブなタブ

Gecko 5.0 が必要(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) より非アクティブなタブでは、1 秒あたり 1 回を超えて実行しないようにインターバルを制限します。

"this" 問題

setInterval() (もっと言うと他のどんな関数でも) にメソッドを渡すと、間違った this の値で呼び出されることがあります。この問題は JavaScript リファレンス で詳しく説明されています。

説明

setInterval() によって実行されるコードは、setInterval が呼び出された関数とは別の実行コンテキスト内で実行されます。その結果、呼び出された関数の this キーワードは window (または global) オブジェクトに設定されます。これは setTimeout を呼び出した関数の this の値とは異なります。以下の例をご覧ください (ここでは setInterval() ではなく setTimeout() を使用していますが、どちらのタイマーでも問題は同じです):

myArray = ['zero', 'one', 'two'];

myArray.myMethod = function (sProperty) {
    alert(arguments.length > 0 ? this[sProperty] : this);
};

myArray.myMethod(); // prints "zero,one,two"
myArray.myMethod(1); // prints "one"
setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
// passing the 'this' object with .call won't work
// because this will change the value of this inside setTimeout itself
// while we want to change the value of this inside myArray.myMethod
// in fact, it will be an error because setTimeout code expects this to be the window object:
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error

この例でわかるとおり、旧来の JavaScript でコールバック関数に this オブジェクトを渡す方法はありません。

考えられる解決策

"this" 問題の解決策としてネイティブな setTimeout() および setInterval() グローバル関数を、global functions with two ones that enable their invocation through the Function.prototype.call メソッドを通して呼び出すことが可能な 非ネイティブ メソッドに置き換える方法が考えられます。考えられる置き換え方法の例を以下に示します:

// Enable the passage of the 'this' object through the JavaScript timers

var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;

window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
  return __nativeST__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
  } : vCallback, nDelay);
};

window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
  return __nativeSI__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
  } : vCallback, nDelay);
};
これら 2 つの置き換えにより、IE のタイマーで HTML5 標準の、コールバック関数に任意の引数を渡すことも可能になります。よって、標準仕様に準拠しない ポリフィルとしても使用できます。標準仕様に準拠するポリフィルについては、コールバックの引数 をご覧ください。

新機能のテスト:

myArray = ['zero', 'one', 'two'];

myArray.myMethod = function (sProperty) {
    alert(arguments.length > 0 ? this[sProperty] : this);
};

setTimeout(alert, 1500, 'Hello world!'); // the standard use of setTimeout and setInterval is preserved, but...
setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2,5 seconds

この他に this 問題のより複雑な解決策として、後述するフレームワーク もあります。

JavaScript 1.8.5 で、関数のすべての呼び出しで this として使用する値を設定できる、Function.prototype.bind() メソッドを導入しました。これにより、関数を呼び出したコンテキストに応じて this がどのようになるかが明確にならない問題を簡単に回避できます。また、ES2015 では アロー関数 をサポートして、字句 this と組み合わせると myArray の内部では setInterval( () => this.myMethod) と記述できます。

MiniDaemon: タイマー管理フレームワーク

多くのタイマーが必要なページでは、実行中のタイマーのイベントをすべて追跡し続けることが困難な場合があります。この問題の解決策のひとつが、オブジェクト内のタイマーの状態に関する情報を保存することです。以下のコードは、そのような抽象化の最小限の例です。コンストラクターは、クロージャの使用を明示的に避けるアーキテクチャになっています。また、this オブジェクトをコールバック関数に渡す代替手段も提供します (詳しくは "this" 問題 をご覧ください)。以下のコードは GitHub でも入手できます

より複雑ですがモジュール化したもの (Daemon) については、JavaScript Daemons Management をご覧ください。このより複雑なバージョンは、Daemon コンストラクター用の大規模でスケーラブルなメソッドのコレクションに過ぎません。しかし Daemon コンストラクター自体は、daemon のインスタンス化の間に宣言可能な init および onstart 関数のサポートを追加した MiniDaemon のクローンに過ぎません。よって MiniDaemon フレームワークは、シンプルなアニメーションのために推奨する方法であり続けます。これは、メソッドのコレクションがない Daemon が本質的に MiniDaemon のクローンであるためです。

minidaemon.js

/*\
|*|
|*|  :: MiniDaemon ::
|*|
|*|  Revision #2 - September 26, 2014
|*|
|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
|*|  https://developer.mozilla.org/User:fusionchess
|*|  https://github.com/madmurphy/minidaemon.js
|*|
|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
|*|  http://www.gnu.org/licenses/lgpl-3.0.html
|*|
\*/
 
function MiniDaemon (oOwner, fTask, nRate, nLen) {
  if (!(this && this instanceof MiniDaemon)) { return; }
  if (arguments.length < 2) { throw new TypeError('MiniDaemon - not enough arguments'); }
  if (oOwner) { this.owner = oOwner; }
  this.task = fTask;
  if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); }
  if (nLen > 0) { this.length = Math.floor(nLen); }
}
 
MiniDaemon.prototype.owner = null;
MiniDaemon.prototype.task = null;
MiniDaemon.prototype.rate = 100;
MiniDaemon.prototype.length = Infinity;
 
  /* These properties should be read-only */
 
MiniDaemon.prototype.SESSION = -1;
MiniDaemon.prototype.INDEX = 0;
MiniDaemon.prototype.PAUSED = true;
MiniDaemon.prototype.BACKW = true;
 
  /* Global methods */
 
MiniDaemon.forceCall = function (oDmn) {
  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
  return true;
};
 
  /* Instances methods */
 
MiniDaemon.prototype.isAtEnd = function () {
  return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length;
};
 
MiniDaemon.prototype.synchronize = function () {
  if (this.PAUSED) { return; }
  clearInterval(this.SESSION);
  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
};
 
MiniDaemon.prototype.pause = function () {
  clearInterval(this.SESSION);
  this.PAUSED = true;
};
 
MiniDaemon.prototype.start = function (bReverse) {
  var bBackw = Boolean(bReverse);
  if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; }
  this.BACKW = bBackw;
  this.PAUSED = false;
  this.synchronize();
};
MiniDaemon は、引数をコールバック関数に渡します。この機能をネイティブにサポートしないブラウザーで動作させたい場合は、ここで提案したメソッドのいずれかを使用してください。

構文

var myDaemon = new MiniDaemon(thisObject, callback[, rate[, length]]);

説明

アニメーションで必要なすべての情報 (this オブジェクト、コールバック関数、長さ、フレームレート) を持つ JavaScript Object を返します。

引数

thisObject
コールバック関数が呼び出された this オブジェクト。object または null を使用できます。
callback
繰り返し実行する関数。これは 3 個の引数を伴って呼び出されますindex (反復処理の、毎回の処理のインデックス)、length (daemon に割り当てられた総実行回数。有限の数値または Infinity を指定できます)、backwards (index を加算するか減算するかを示す論理値)。これは callback.call(thisObject, index, length, backwards) のようなものです。コールバック関数が false 値を返す場合は、daemon が一時停止しています
rate (省略可能)
毎回の実行の時間間隔 (ミリ秒単位の数値)。デフォルト値は 100 です。
length (省略可能)
総実行回数。正の整数または Infinity を使用できます。デフォルト値は Infinity です。

MiniDaemon インスタンスのプロパティ

myDaemon.owner
daemon が実行される this オブジェクト (読み書き可能)。object または null を使用できます。
myDaemon.task
繰り返し実行する関数 (読み書き可能)。これは 3 個の引数を伴って呼び出されます。index (反復処理の、毎回の処理のインデックス)、length (daemon に割り当てられた総実行回数。有限の数値または Infinity を指定できます)、backwards (index 減算するか否かを示す論理値)。myDaemon.task の関数が false 値を返す場合は、daemon が一時停止しています。
myDaemon.rate
毎回の実行の時間間隔 (ミリ秒単位の数値、読み書き可能)。
myDaemon.length
総実行回数。正の整数または Infinity を使用できます (読み書き可能)。

MiniDaemon インスタンスのメソッド

myDaemon.isAtEnd()
daemon が開始/終了状態であるか否かを示す論理値を返します。
myDaemon.synchronize()
開始した daemon のタイマーと、daemon の実行時間を同期します。
myDaemon.pause()
daemon を一時停止します。
myDaemon.start([reverse])
daemon を前方 (毎回実行するたびに index が増加) または後方 (index が減少) に開始します。

MiniDaemon グローバルオブジェクトのメソッド

MiniDaemon.forceCall(minidaemon)
終端に達しているか否かの事実にかかわらず、minidaemon.task の関数へのひとつのコールバックを強制します。どの場合も、内部の INDEX プロパティは (実際の実行方向に応じて) 増加または減少します。

使用例

HTML ページ:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>MiniDaemin Example - MDN</title>
  <script type="text/javascript" src="minidaemon.js"></script>
  <style type="text/css">
    #sample_div {
      visibility: hidden;
    }
  </style>
</head>

<body>
  <p>
    <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" />
    <input type="button" onclick="fadeInOut.start(true);" value="fade out">
    <input type="button" onclick="fadeInOut.pause();" value="pause" />
  </p>

  <div id="sample_div">Some text here</div>

  <script type="text/javascript">
    function opacity (nIndex, nLength, bBackwards) {
      this.style.opacity = nIndex / nLength;
      if (bBackwards ? nIndex === 0 : nIndex === 1) {
        this.style.visibility = bBackwards ? 'hidden' : 'visible';
      }
    }

    var fadeInOut = new MiniDaemon(document.getElementById('sample_div'), opacity, 300, 8);
  </script>
</body>
</html>

実際の動作例を見る

注記

setInterval() 関数は一般に、アニメーションのように何度も実行される関数に遅延をセットするのに使われます。

WindowOrWorkerGlobalScope.clearInterval() を使ってインターバルをキャンセルすることができます。

指定時間後に 一度 だけ関数を呼び出したい場合には、WindowOrWorkerGlobalScope.setTimeout() を使います。

実行時間をインターバルより確実に短くする

ロジックの実行時間がインターバル時間より長くなる可能性がある場合は、WindowOrWorkerGlobalScope.setTimeout を使用して名前付き関数を再帰的に呼び出すことを推奨します。例えば 5 秒おきにリモートサーバーへ接続するために setInterval を使用するとき、ネットワークの遅延やサーバーの不応答などさまざまな問題で、割り当てられた時間内にリクエストが完了しない可能性があります。そのため、必ずしも順番どおりには返らない XHR リクエストがキュー内にあることに気づくかもしれません。

この場合は、再帰的な setTimeout() のパターンを推奨します:

(function loop(){
   setTimeout(function() {
      // Your logic here

      loop();
  }, delay);
})();

このコードスニペットでは、名前付き関数 loop() を宣言して直ちに実行します。loop() はロジックが完全に実行された後に、内部の setTimeout() によって再帰呼び出しされます。このパターンは一定の間隔で呼び出すことが保証されませんが、再帰呼び出しの前に前の実行が完了することが保証されます。

インターバルを抑制する

Firefox で setInterval() は、setTimeout() と同様に、インターバルが制限されます。遅延が指定値より長い理由 をご覧ください。

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
WindowOrWorkerGlobalScope.setInterval() の定義
現行の標準 最新の仕様で、メソッドを WindowOrWorkerGlobalScope ミックスインに移動。
WHATWG HTML Living Standard
WindowTimers.setInterval() の定義
現行の標準 最初期の定義 (DOM Level 0)

ブラウザー実装状況

機能 Chrome Edge Firefox (Gecko)[2] Internet Explorer Opera Safari
基本サポート 1.0 (有) 1.0 (1.7 or earlier)
52 (52)[3]
4.0 4.0 1.0
コールバック関数[1] の引数のサポート (有) (有) (有) 10.0 (有) ?
機能 Android Android 版 Chrome Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (有) 1.0 (1)
52.0 (52)[3]
6.0 6.0 1.0
コールバック関数[1] の引数のサポート ? ? ? ? ? ? ?

[1] 最初の形式で省略可能な引数をサポートするか否か。

[2] Firefox 13 より前のバージョンでは、タイムアウトの "実際の遅延" をミリ秒単位で示す追加の引数をコールバックに渡していました。この非標準引数は、Firefox 13 以降で使用しません。XPCOM ベースの Firefox 拡張機能が setInterval() を使用することは、拡張機能の更新コードが Window の更新を起こしてタイマーが失われる可能性があるため、推奨しません。XPCOM 拡張機能では、代わりに nsITimer を使用するべきです。

[3] setInterval()WindowOrWorkerGlobalScope ミックスインで定義しています。

[4] トラッキングスクリプトのタイムアウトを制限する をご覧ください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, mushahiroyuki, teoli, jsx, ethertank, Potappo, Ceth, Shoot, Marsf, Okome, Taken, Mgjbot, Hfjapancom
 最終更新者: yyss,