タイマーの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();
}

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト