ywork2020.com

Title

一定の遅延間隔毎に関数を呼び出す

目次 (INDEX)

window とは

ここで説明する window とは次の語句からなる JavaScript のグローバル変数であり、Window オブジェクトを参照します。
window
読み: ウィンドウ
意味: 窓

setInterval とは

ここで説明する setInterval とは次の語句からなる JavaScript のメソッドです。
set
読み: セット
意味: 準備する、置く、定める、配置、設定
interval
読み: インターバル
意味: 間、時間、時間の間隔、合間

目次に戻る

window.setInterval メソッドの概要

このメソッドは、一定の遅延間隔毎に引数に与えた関数、またはコードスニペットを繰り返し呼び出します。

このメソッドの戻り値はインターバルを一意に識別するための interval ID を返します。 この interval ID を clearInterval() メソッドの引数に与えることで、そのインターバルを削除することができます。

なお、このメソッドは Window インターフェイスだけでなく、Worker インターフェイスでも提供されます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var intervalID = window.setInterval(timerHandler, msDelay [, argument, argument ...]);
var intervalID = window.setInterval(code, delay);
  • intervalID: この関数の戻り値です。インターバルを一意に識別するための ID 値となります。
  • timerHandler: 遅延間隔毎に呼び出される関数です。この関数には直接に引数は渡されません。また、戻り値も想定されていません。
  • msDelay: 遅延間隔を ミリ秒単位の数値で指定します。
  • argument: 遅延間隔毎に timerHandler に渡す引数をここで指定します。この引数は IE9 以前のバージョンでは機能しません。
  • code: timerHandler の代わりとなる文字列としてのコードスニペットです。これはセキュリティ的にリスクがあるので使用は控えてください。

目次に戻る

サンプルコードと実行結果

ここでは、setInterval() で関数を繰り返し呼び出す方法と、その関数を clearInterval() で削除するサンプルを見て下さい。

サンプルコード: HTML
<body>
	<p>
		スタート : <button onclick="funcStratCount()" id="idStrat"> スタート </button>
	</p>
	<p>
		カウント : <output id="idOutput"> 0 </output> 秒
	</p>
	<p>
		ストップ : <button onclick="funcStopCount()"> ストップ </button>
	</p>
	<script>...</script>
</body>
  • 03: button onclick="funcStratCount()" (このボタンをクリックすると funcStratCount() 関数を呼び出します。)
  • 06: output id="idOutput" (この要素にカウントを出力します。)
  • 09: button onclick="funcStopCount()" (このボタンをクリックすると funcStopCount() 関数を呼び出します。)
サンプルコード: script
<script>
	let intCount = 0;
	let elmStrat = document.getElementById("idStrat");
	let elmOutput = document.getElementById("idOutput");
	let msDelay = 1000;
	function funcShowCount(){
		elmOutput.innerText = ++intCount;
	}
	function funcStopCount(){
		window.clearInterval(intervalId);
		elmStrat.disabled = false;
	}
	function funcStratCount(){
		intervalId = window.setInterval(funcShowCount, msDelay);
		elmStrat.disabled = true;
	}
</script>
  • 10: window.clearInterval(intervalId) (clearInterval() は引数に与えた識別子のインターバルを削除します。)
  • 14: intervalId = window.setInterval() (funcStratCount() 関数内で setInterval() を実行しています。これにより 一定の遅延間隔毎に funcShowCount 関数を呼び出します。)
実行結果:

スタート :

カウント : 0

ストップ :

目次に戻る