検索結果

window.setInterval

この記事内

概要

一定の遅延間隔を置いて関数を繰り返し呼び出します。

構文

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

ここで、

intervalID は clearInterval に渡すことのできる固有のインターバル ID です。
func は繰り返し呼びたい関数です。
もう一つの構文の code は、繰り返し呼び出したいソースコードの文字列です。
delay は、setInterval() が funcを呼び出す前に待つべき時間です。ミリ秒(1/1000 秒)単位で指定します。

最初の構文で関数にパラメータを付加したものは、Internet Explorer では動作しないので注意してください。

例

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

以下の例では Stop ボタンを押して intervalID をクリアするまで flashtext() 関数が 1 秒に 1 回呼び出されつづけます。

<html>
<head>
<title>setInterval/clearInterval example</title>

<script type="text/javascript">
var intervalID;

function changeColor()
{
  intervalID = setInterval(flashText, 1000);
}

function flashText()
{
  var elem = document.getElementById("my_box");
  if (elem.style.color == 'red')
  {
    elem.style.color = 'blue';
  }
  else
  {
    elem.style.color = 'red';
  }
}

function stopTextColor()
{
  clearInterval(intervalID);
}
</script>
</head>

<body onload="changeColor();">
<div id="my_box">
<p>Hello World</p>
</div>
<button onclick="stopTextColor();">Stop</button>
</body>
</html>

注記

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

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

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

コールバックの引数

setInterval() は指定ミリ秒に呼び出されたコールバックをコールバック関数に引き渡しますが、もしそれが引数のように他のものを期待している場合、それを混同する可能性があります。この問題を回避するためには、コールバックを呼び出すために無名関数を使用してください。

コールバック関数に引数を渡す必要があり、それを setInterval() で追加の引数の指定をサポートしない Internet Explorer でも動作するようにさせる必要がある場合にも、同じテクニックを使うことができます。

例:

intervalID = setInterval(function() { funcflashText(); }, 1000);

'this' 問題

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

仕様

DOM Level 0。どの標準にも属しません。

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

タグ:

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

最終更新者: mushahiroyuki, 2016/10/03 19:44:29