[ Javascript ] タイマーの生成と解除 ( setInterval / clearInterval )

Tweet

Pocket

Javascript でも定期的に処理を実行することができます。例えばブラウザ上の日時を1秒ごとに更新したいケースなどが考えられます。ここでは、Javascript でタイマの生成と解除を行うサンプルを掲載しています。

タイマの生成と解除サンプル

setInterval 関数でタイマを生成し、clearInterval 関数でタイマを解除しています。サンプル中のコメントも参照ください。

var timer;
var count = 0;

var timer_handler = function() {

    // 例えばこの位置で現在日時を取得し、画面へ表示する
    // 処理などが記述されます
    var ctime = new Date();


    // タイマハンドラが10回コールされたらタイマを解除する
    if(++count == 10) {
        clearInterval(timer);
    }
}

// タイマハンドラを1000ミリ秒ごとに実行する（最初の実行は、1000ミリ秒後）
// ただし、他の処理などが動作しているとその分、実行が遅延するので注意。
timer = setInterval(timer_handler, 1000);

一度のみ一定時間経過後に処理するハンドラを登録する

setInterval 関数では繰り返し処理が実行されます。繰り返しではなく、一度のみ一定時間経過後に処理を実行するには、setTimeout 関数を使用します。

setTimeout 関数の使用サンプルについては、『 setTimeout 関数で一定時間経過後に実行される関数を登録する 』 に掲載していますので、よろしければ確認ください。

Tweet

Pocket