javascript - コントロールを JavaScript タイマーに追加する方法

Question

次の JavaScript カウントアップ タイマーに「一時停止」、「再開」、「リセット」、および「終了」機能を追加する方法は?

var sec = 0;

function pad(val) {
    return val > 9 ? val : "0" + val;
}
setInterval(function() {
    document.getElementById("seconds").innerHTML = pad(++sec % 60);
    document.getElementById("minutes").innerHTML = pad(parseInt(sec / 60, 10));
}, 1000);

Answer 1

setIntervalそのためには、関数へのポインターが必要です。

var sec = 0,
  timeoutHandler;

function pad(val) {
    return val > 9 ? val : "0" + val;
}

function pausePad() {
    clearTimeout( timeoutHandler );
}

function resumePad() {
    pausePad();
    runPad();
}

function resetPad() {
    sec = 0;
    resumePad();
}

function runPad() {
    timeoutHandler = setInterval(function() {
        document.getElementById("seconds").innerHTML = pad(++sec % 60);
        document.getElementById("minutes").innerHTML = pad(parseInt(sec / 60, 10));
    }, 1000);
}
runPad();