読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

タイマー

タイマーとは

  • あらかじめ指定した時間後に、指定した処理を行わせる
  • 一定時間ごとに同じ処理を繰り返す

setTimeoutメソッド

  • タイマーを開始し、2番目の引数で指定した時間後に、最初の引数で指定したステートメントを実行する
var 変数 = window.setTimeout( '実行したい処理', '時間msec' );

 ※windowは、省略可能


<h1>3秒後にダイアログが表示されます</h1>
<script>
var timerID;
timerID = window.setTimeout('alert("3秒経過しました")', 3000); 
</script>
  • 3000ミリ秒後にalert( )メソッドを呼び出す
タイマーが動き出しても他の処理は続行される
  • タイマーが動き出した後でも、setTimeout( )メソッド以降のステートメントは順に実行されて行きます
<h1>タイマーの実験</h1>
<script>
var timerID;
timerID = window.setTimeout('alert("2秒経過しました")', 2000); 
alert( 'これは次の行です' );
</script>
指定した時間後に別のページに移動する
<script>
var LIMIT = 3000;
var URL= 'http://www.yahoo.co.jp/';

function timeOut(){
  var timerID = window.setTimeout('moveURL()', LIMIT);
}

function moveURL() {
  alert ('時間切れです' + URL + 'に移動します');
  window.location.replace(URL);
}

window.onload = timeOut;
</script>
  • locationオブジェクトのreplace( )メソッドは、現在のページを、引数で指定したURLのHTMLドキュメントに入れ替えます
  • 履歴の情報自体を入れ替えます(戻るボタンで戻ることはできません)

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