JavaScript/HTMLおぼえがき

｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜

タイマー処理

タイマー　　　戻る

処理を遅延させたい、指定時間間隔ごとに処理を繰り返したい、というときには以下のような関数を使用します。
setTimeout関数 ・・・ 指定した時間経過後に処理を実行する
setInterval関数 ・・・ 指定した時間ごとに処理を実行する
また、それぞれタイマーを停止するための関数も用意されています。
clearTimeout関数 ・・・ setTimeoutで設定したタイマーを取り消す
clearInterval関数 ・・・ setIntervalで設定したタイマーを取り消す
上記以外に、アニメーション処理などをを行う時にブラウザの表示を邪魔しないタイミングで処理されるようにする関数で
requestAnimationFrame(callback)を使うとパフォーマンスの低下を防ぐことができます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<TITLE>タイマー</TITLE>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
//タイマーのセット＆キャンセル//
function start1() { form.message1.value = "3秒タイマーセットしました" ; id1 = setTimeout(stop1,3000) ; }
function stop1()  { form.message1.value = "3秒経過しました" ; }
function cancel() { clearTimeout(id1) ; form.message1.value = "キャンセルしました" ; }
//タイマーを連続的に作動させる//
var i = 1 ;
function start2() { id2 = setInterval(count,1000) ; form.message2.value = "タイマー開始しました" ; }
function count()  { form.message2.value = "1秒経過しました（" + i + "回目）" ; i++ ; }
function stop2()  { clearInterval(id2) ; form.message2.value = "停止しました" ; }
//アニメーション要求処理//
function animation() {
  form.message3.value = j + "回目" ;
  j++ ;
  if ( stopFlag == 0 ) { requestAnimationFrame(animation)　; }
  else { form.message3.value = "停止" ;}
}
function start3() { stopFlag = 0 ; j = 1 ; animation() ; }
function stop3() { stopFlag = 1 ; }
</script>
</head>
<body>
<hr>
<h4>タイマーをセットする</h4>
<form Name="form">
<p>
<input type="button" value="スタート" onClick="start1()">
<input type="button" value="キャンセル" onClick="cancel()"> 
<p>
<input NAME="message1" value="" size=30>   
<hr>
<h4>タイマーを連続的に作動させる</h4>
<p>
<input type="button" value="スタート" onClick="start2()">
<input type="button" value="ストップ" onClick="stop2()"> 
<p>
<input NAME="message2" value="" size=30> 
<hr>  
<h4>アニメーション処理要求</h4>
<p>
<input type="button" value="スタート" onClick="start3()">
<input type="button" value="ストップ" onClick="stop3()"> 
<p>
<input NAME="message3" value="" size=30> 
<hr>  
</form> 
</body> 
</html>

時間カウント　　　戻る

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<TITLE>時間のカウント</TITLE>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>
<!--
//タイマー起動
function time() {
  tmr=setTimeout("time()",10); 
  sday=new Date();
  document.myform.ctime.value=((sday.getTime()-st)/1000).toFixed(3);
}
//スタート
function srt() {
  sday=new Date();
  st=sday.getTime();
  time();
}
//ストップ
function stp() {clearTimeout(tmr);}
//-->
</script>
</head>
<body>
<p>時間のカウント</p>
<hr>
<FORM Name="myform">
<p>
<input type="button" value="スタート" onClick="srt()">
<input type="button" value="ストップ" onClick="stp()"> 
<p>
<INPUT NAME="ctime" value="" size=20>   
</form> 
</BODY> 
</HTML>


｜JavaScript｜JavaScript/HTML｜ サイトマップ｜ホーム｜