コース推薦：

Window setInterval() メソッド

setInterval() 定義と使用法

setInterval() メソッドは指定された時間間隔（ミリ秒で指定）で関数を周期的に呼び出します。 clearInterval() またはウィンドウを閉じます。

注釈：1秒 = 1000ミリ秒。

ヒント

一度だけ関数を実行する場合は、 setTimeout() メソッドを使用してください。

インターバルをクリアするには、 setInterval() 返されるID：

myInterval = setInterval(function, milliseconds);

その後、以下を呼び出して clearInterval() 実行を停止するために

clearInterval(myInterval);

参照も：

clearInterval()メソッド

setTimeout()メソッド

clearTimeout()メソッド

例

例1

毎秒"Hello"を表示します（1000ミリ秒）：

setInterval(function () {element.innerHTML += "Hello"}, 1000);

自分で試してみる

例2

displayHelloを毎秒呼び出します：

setInterval(displayHello, 1000);

自分で試してみる

ページの下部に更多の例が提供されています。

構文

setInterval(function, milliseconds, param1, param2, ...)

引数

返り値

ブラウザのサポート

すべてのブラウザがサポートしています setInterval()：

さらに多くの例

例 3

デジタルウォッチのように時間を表示します：

setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}

自分で試してみる

例 4

setInterval()を使用してデジタルウォッチを停止します：

const myInterval = setInterval(myTimer, 1000);
function myTimer() {
  const date = new Date();
  document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function myStopFunction() {
  clearInterval(myInterval);
}

自分で試してみる

例 5

setInterval()とclearInterval()を使用してダイナミックなプロセスバーを作成します：

function move() {
  const element = document.getElementById("myBar");
  let width = 0;
  let id = setInterval(frame, 10);
  function frame() {
    if (width == 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

自分で試してみる

例 6

500ミリ秒ごとに2つの背景色の間で切り替わります：

const myInterval = setInterval(setColor, 500);
function setColor() {
  let x = document.body;
  x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}
function stopColor() {
  clearInterval(myInterval);
}

自分で試してみる

例 7

パラメータを関数に渡します（IE9および以前のバージョンでは動作しません）：

setInterval(myFunc, 2000, "param1", "param2");

自分で試してみる

匿名関数を使用する場合、すべてのブラウザに適用されます：

setInterval(function() {myFunc("param1", "param2")}, 2000);

自分で試してみる

ツールボックス

JavaScriptおよびHTML DOMリファレンスマニュアル

JavaScript サンプル

JavaScript テスト

JavaScript 教程

スポンサーリンク