TOP > カテゴリ > JavaScript >

JavaScriptでタイマーを使用する[setTimeout/setInterval]

JavaScriptのタイマーは2種類あります。

1つ目は指定時間後に1回だけ発動するsetTimeout()、2つ目は指定間隔でキャンセルされるまで半永久的に発動するsetInterval()です。

setTimeout - 指定された時間後に発動する

次のサンプルは3秒後にアラートを表示します。

<script>
 // 3秒後に発動する
 setTimeout(function() {
   alert('3秒経過しました。');
 }, 3000);
</script>

第二引数はミリ秒を指定します。1秒=1000ミリ秒です。

setInterval - 指定された間隔で発動する

1秒毎に値を出力して7回出力したらタイマーを終了します。

<script>
 var intervalID; // タイマーID
 var value = 0;   
 
 function addValue(){
   
   value++;
   
   // 値を出力
   document.write(value);
   
   // 値が7になったらタイマーをキャンセルする
   if(value == 7){
     document.write('<br>タイマーがキャンセルされました。');
     clearInterval(intervalID);
   }
 }
 
 // タイマーの発動(1秒おき) 
 intervalID = setInterval(addValue, 1000);
 
</script>

タイマーの終了(キャンセル)はsetInterval()の戻り値のintervalIDをclearInterval()の引数に渡します。

外部リンク(MDN)

setTimeout setInterval clearInterval





関連記事



公開日:2016年05月25日
記事NO:01978