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 =＆＃34; T.pause（）＆＃34;在您希望拥有该功能的元素中。或者在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};
}

如何为正在运行的setInterval添加暂停/播放功能？

2 个答案: