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 関数を呼び出します。)
スタート :
カウント : 秒
ストップ :