setIntervalメソッドとclearIntervalメソッド

setIntervalメソッドとclearIntervalメソッド

  • setIntervalメソッドは、一定の間隔ごとに処理を呼び出す、タイマー機能を開始します
  • 一定間隔で表示画像を切り替えるなどの用途で使われます
  • タイマーを停止するには、clearIntervalメソッドを使います



setInterval ( 関数名または関数式, 時間感覚 );

  • 時間間隔はミリ秒（1/1000秒）単位で指定します
  • タイマーが開始されると、指定された処理が一定間隔で実行され続けます
  • このメソッドの戻り値は、タイマーに割り当てられたIDです
  • IDは、タイマーを停止する際に必要となります
  • タイマーを指定するには、clearIntervalメソッドを使います
  • このメソッドは、指定されたIDのタイマーを停止します



clearInterval ( タイマーID );



《タイマー機能の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
<script>
  var count = 0;
  var timer = setInterval( output, 1000 );
  function output() {
    count++;
    console.log( count + '秒経過' );
    if(count >= 10) {
      clearInterval( timer );
    }
  }
</script>
</head>
<body>
</body>
</html>


  • 1000ミリ秒（1秒）ごとにoutput関数を呼び出しています
  • output関数は、経過時間をコンソールに表示します
  • output関数が10回呼び出された時点で、タイマー機能を停止します


setTimeout/clearTimeout

  • setInterval/clearIntervalが処理を開始する間隔を指定するのに対し、setTimeout/clearTimeoutは、処理が終了してから何秒後に次の処理を開始するかを指定します
  • アニメーションのような、完了までに時間がかかる処理を実行する場合には、setTimeout/clearTimeoutを利用します


  • windowオブジェクトはすべてのブラウザオブジェクトの親にあたるオブジェクトで、ダイアログボックスの表示やタイマー処理を行うことができる