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>

タマー（スリープ）　　　戻る

一定時間処理を待つ (sleepする) 機能とは、プログラムが一時的に動作を停止することを可能にします。
Promiseは、非同期操作が成功したか失敗したかを表すオブジェクトです。複数の非同期処理を管理したり、連鎖させる時に使います。
async/awaitは、非同期処理をより読みやすく書くための構文です。Promiseを使って非同期処理を行う時に便利です。 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>sleep</title>
<script>
function sleep(ms) { return new Promise(function(resolve) { setTimeout(resolve, ms) } ) }
async function start() {
  form.message.value = ("処理開始");
  await sleep(3000);
  form.message.value = ("3秒後に表示");
}
</script>
</head>
<body>
<h4>スリープ処理</h4>
<form name="form">
<p>
<input type="button" value="スタート" onClick="start()">
<p>
<input name="message" value="" size=30> 
</form> 
</body>
</html>


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