JavaScript: タイマーのsetInterval()とsetTimeout()の違い
JavaScriptでタイマーを使う方法は2つあります。setInterval()とsetTimeout()です。 2つの違いは「繰り返し」か「1回きり」かの違いです。
setInterval(): 指定時間おきに繰り返し処理を行う。
setTimeout(): 指定時間後に1回だけ処理を行う
タイマーをストップする場合はclearInterval()とclearTimeout()を使います。
書式
setInterval(処理,時間)
clearInterval(タイマーid)
setTimeout(処理,時間)
cleartimeout(タイマーid)
コード例
var timer1, timer2
timer1 = setInterval(func, 1000);
clearInterval(timer1);
timer2 = setTimeout(func, 1000);
clearTimeout(timer2);
サンプル
Startボタンを押すと、1秒おきに現在時刻が表示されます。
時刻表示
下にこのサンプルのHTMLとJavaScriptを記述します。
HTML
<p><button id="start">Start</button>
<button id="stop">Stop</button></p>
<div id="result"></div>
JavaScript
var timer1; var btnStart = document.getElementById('start'); var btnStop = document.getElementById('stop'); // start btnStart.addEventListener('click', function(){ startTimer(); btnStart.disabled = true; }); // stop btnStop.addEventListener('click', function(){ stopTimer(); btnStart.disabled = false; }); // タイマー開始 function startTimer(){ timer1 = setInterval(showDate, 1000); } // タイマー終了 function stopTimer(){ clearInterval(timer1); } // 日付表示 function showDate(){ var re = document.getElementById('result'); re.innerHTML = new Date(); }