如何在正在運行的setInterval中添加暫停/播放功能？

Question

因此，我正在嘗試創建一個番茄計時器。 該網站當前的外觀和功能如下： POMODOROone

到目前為止，我的計時器已正確計時。 但是，當我嘗試添加暫停和繼續功能時，它會中斷。 我嘗試了多種方法，但沒有取得太大的成功。 因此，我刪除了所有嘗試，並獲得了到目前為止工作的代碼。 因此，我的問題是如何為計時器添加暫停/恢復功能？ 另外，當我單擊正負跨度或輸入中的任意一個時，如何使計時器停止？

這是Javascript：

//decreases break time by 5 mins
function decreaseBreak() {
    var time = document.getElementById("breakInput").value;
    time = parseInt(time, 10);
    var new_time = time - 5;
    if (time == 0) {
        return 0;
    }

    document.getElementById("breakInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
}
//increases break time by 5 mins
function increaseBreak() {
    var time = document.getElementById("breakInput").value;
    time = parseInt(time, 10);
    var new_time = time + 5;
    document.getElementById("breakInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
}
//decreases session time by 5 mins
function decreaseSession() {
    var time = document.getElementById("sessionInput").value;
    time = parseInt(time, 10);
    var new_time = time - 5;
    if (time == 0) {
        return 0;
    }
    document.getElementById("sessionInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
}
//increases session time by 5 mins
function increaseSession() {
    var time = document.getElementById("sessionInput").value;
    time = parseInt(time, 10);
    var new_time = time + 5;
    document.getElementById("sessionInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
}

//countdown timer 


function start() {
    var sec = 60;
    var timerParagraph = document.getElementById("timerParagraph").innerHTML;
    var min = timerParagraph.substring(0, timerParagraph.indexOf(":"));
    var time = min * 60;
    min = parseInt(min,10)-1;
    setInterval(function() {
        sec = sec - 1;

        if (sec < 0) {
            min -= 1;
            sec = 59;
        }

        if (min < 0 && sec < 0) {
            clearInterval(start());
        }
        var temp;

        if (min.toString().length == 1 && sec.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = "0" + min + ":" + sec;
        } else if (sec.toString().length == 1 && min.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = min + ":" + "0" + sec;
        } else if (min.toString().length == 1 && sec.toString().length ==1) {
            document.getElementById("timerParagraph").innerHTML = "0" + min + ":" + "0" + sec;
        } else {
            document.getElementById("timerParagraph").innerHTML = min + ":" + sec;
        }

    },1000);

}

新的更新代碼：

//decreases break time by 5 mins
function decreaseBreak() {
    var time = document.getElementById("breakInput").value;
    time = parseInt(time, 10);
    var new_time = time - 5;
    if (time == 0) {
        return 0;
    }
    document.getElementById("breakInput").value = new_time;
    clearInterval(timer); 
    document.getElementById("timerParagraph").innerHTML = new_time+":00";

}
//increases break time by 5 mins
function increaseBreak() {
    var time = document.getElementById("breakInput").value;
    time = parseInt(time, 10);
    var new_time = time + 5;
    document.getElementById("breakInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
    clearInterval(timer);
    timer = null;
}
//decreases session time by 5 mins
function decreaseSession() {
    var time = document.getElementById("sessionInput").value;
    time = parseInt(time, 10);
    var new_time = time - 5;
    if (time == 0) {
        return 0;
    }
    document.getElementById("sessionInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
    clearInterval(timer);
}
//increases session time by 5 mins
function increaseSession() {
    var time = document.getElementById("sessionInput").value;
    time = parseInt(time, 10);
    var new_time = time + 5;
    document.getElementById("sessionInput").value = new_time;
    document.getElementById("timerParagraph").innerHTML = new_time+":00";
    clearInterval(timer);
}

//countdown timer 

var timer = null;
var sec = 60;


function start() {
    var timerParagraph = document.getElementById("timerParagraph").innerHTML;
    var min = timerParagraph.substring(0, timerParagraph.indexOf(":"));
    min = parseInt(min,10)-1;

    function onTimer() {
        sec = sec - 1;

        if (sec < 0) {
            min -= 1;
            if (min == 0 && sec == 0) {
                // When min and second equals zero, timer stops
                clearInterval(timer);
            }
            sec = 59;
        }


        if (min.toString().length == 1 && sec.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = "0" + min + ":" + sec;
        } else if (sec.toString().length == 1 && min.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = min + ":" + "0" + sec;
        } else if (min.toString().length == 1 && sec.toString().length ==1) {
            document.getElementById("timerParagraph").innerHTML = "0" + min + ":" + "0" + sec;
        } else {
            document.getElementById("timerParagraph").innerHTML = min + ":" + sec;
        }
    }

    timer = setInterval(onTimer,1000);
    console.log("Start timer");

    // when the div is clicked, the timer starts and stops.
    document.getElementById("timerDiv").onclick = function() {
        if (timer) {
            clearInterval(timer);
            timer = null; 
        } else {
            timer = setInterval(onTimer,1000);
            console.log("Resume timer");
        }
    }

}

此更新的代碼適用於以下新操作：1.計時器開始播放時，如果單擊timerDiv，它將暫停。 2.然后再次單擊，它將恢復。

現在，當我單擊正號和負號並更改時間時，它會像應該更改的那樣更改時間，並像調用它一樣清除間隔。 但是，當我再次單擊timerDiv時，它不是從頭開始播放，而是從上次中斷的地方繼續播放時間。 我將如何做，以便當我再次單擊timerDiv時，它從新時間開始倒數，而不是從以前的時間開始倒數。

Answer 1

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_clearinterval

在start（）函數內部設置間隔並將其清除的方式沒有多大意義，這可能是造成麻煩的原因。 每秒調用的函數應與函數名稱一起存儲。

/*
A wrapper variable is used to keep variables in scope so clearinterval can be used and variables don't interact outside of 'T'.
*/
var T = {
    sec: null,
    timerParagraph: null,
    min: null,
    time: null,
    interval: null,
    //countdown timer 
    start: function(){
        T.interval = setInterval(T.tickClock,1000); 
    },
    pause: function(){
        clearInterval(T.interval);
    },
    reset: function(){
        T.sec = 60;
        T.timerParagraph = document.getElementById("timerParagraph").innerHTML;
        T.min = T.timerParagraph.substring(0, T.timerParagraph.indexOf(":"));
        T.time = T.min * 60;
        T.min = parseInt(T.min,10)-1;
    },
    tickClock: function(){
        T.sec = T.sec - 1;

        if (T.sec < 0) {
            T.min -= 1;
            T.sec = 59;
        }

        if (T.min < 0 && T.sec < 0) {
            clearInterval(T.interval);
        }
        if (T.min.toString().length == 1 && T.sec.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = "0" + T.min + ":" + T.sec;
        } else if (T.sec.toString().length == 1 && T.min.toString().length == 2) {
            document.getElementById("timerParagraph").innerHTML = T.min + ":" + "0" + T.sec;
        } else if (T.min.toString().length == 1 && T.sec.toString().length ==1) {
            document.getElementById("timerParagraph").innerHTML = "0" + T.min + ":" + "0" + T.sec;
        } else {
            document.getElementById("timerParagraph").innerHTML = T.min + ":" + T.sec;
        }
    }
    /*
    Use T.reset() to set the clock back to the beginning. Use T.start to begin the interval and T.pause to stop the interval.
    You may need to record how far within a second the pause is used so you can offset the second when you start again.
    This would mean having a settimeout which counts in milliseconds or something.
    */
}

我沒有測試過此代碼，因此請注意潛在的錯別字，盡管我對此進行了仔細檢查。

要使計時器暫停，請在要具有該功能的元素內使用onclick =“ T.pause（）”。 或在javascript中使用

element.onclick = function(){
    T.pause();
}

http://www.w3schools.com/jsref/event_onclick.asp

Answer 2

這是一個稱為interruptible-timer的實現：

// A timer which can be interrupted and picks up where you left off.
//
// Usage:
// ```
// var timer = interruptibleTimer(task, 5000);
// timer.start();    // Start the timer, or resume it after stopping.
// timer.stop();     // Timer continues to run, but task will not be called.
// timer.run();      // Run task now, and start timer again from now.
// timer.reset();    // Stop the timer and reset it to 0.
// ```

var set = window.setTimeout;
var clear = window.clearTimeout;

function interruptibleTimer(fn, interval) {
  var recent = 0;
  var timer;

  // PRIVATE FUNCTIONS
  function now()      { return +new Date(); }
  function delay()    { return recent ? Math.max(0, recent + interval - now()) : interval; }
  function schedule() { timer = set(run, delay()); }

  // PUBLIC APIs
  function start()    { if (!timer) schedule(); }
  function stop()     { clear(timer); timer = 0; }
  function run()      { fn(); recent = now(); schedule(); }
  function reset()    { stop(); recent = 0; }

  return {start, stop, run, reset};
}