somemo's diary

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【Javascript】setIntervalでストップウォッチ

setIntervalでストップウォッチを作ってみました。

コード

以下のとおりです。

// セットする秒数、タイムスタンプ、interval用
var sec, stamp, interval_id;

/**
 * 初期化
 */
var init = function() {
    sec = 0.000;
    $('#sec').text(sec);
};

/**
 * 時間をセットする
 */
var setTimer = function() {
    var now_date = new Date().getTime();
    $('#sec').text(Math.round((now_date - stamp) * 1000) / 1000);
    stamp = now_date;
};

init();

/**
 * start処理
 */
$('#start').bind('click', function() {
    if (1) {
// 二度押し防止処理
    }
    stamp = new Date().getTime();
    interval_id = setInterval(setTimer, 100);
});

/**
 * stop処理
 */
$('#stop').bind('click', function() {
    clearInterval(interval_id);
});

/**
 * reset処理
 */
$('#reset').bind('click', function() {
    init();
});

内容

htmlとしては、onclickイベントを持った三つの要素と、時間を表示する要素が必要です。start時、時間設定用関数setTimerをsetIntervalに0.1秒間隔で実行するようにしています。このときの戻り値をIDとして保持します。これの理由は、stop時に処理をとめるために使用しているclearIntervalにどの処理をとめればよいかを示すIDを渡すためです。

intervalははじめて使ったので、最初よくわかりませんでしたがJavaC#などのスレッドの感覚を思い出したらしっくりきました。問題としては、start処理を2回走らせてしまうと、IDが別の処理のIDに上書きされてしまうためstop処理でとめることができなくなってしまいます。