Javascript 如何将暂停/播放功能添加到正在运行的设置间隔？

所以我正在尝试创建一个pomodoro计时器。该网站目前的外观和功能如下：

到目前为止，我的计时器正在正确倒数。但是，当我尝试添加暂停和恢复功能时，它会中断。我尝试了多种方法，但没有取得多大成功。因此，我删除了我所有的尝试，并且我有到目前为止有效的代码。 所以，我的问题是如何在计时器中添加暂停/恢复功能？另外，当我点击任何正负跨距或输入时，如何使计时器停止

下面是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);

}

//将中断时间减少5分钟
函数decreaseBreak（）{
var time=document.getElementById（“breakInput”）.value；
时间=parseInt（时间，10）；
var new_time=时间-5；
如果（时间==0）{
返回0；
}
document.getElementById（“breakInput”）.value=new\u时间；
document.getElementById（“timerParagraph”）.innerHTML=new_time+“：00”；
}
//增加休息时间5分钟
函数increaseBreak（）{
var time=document.getElementById（“breakInput”）.value；
时间=parseInt（时间，10）；
var新_时间=时间+5；
document.getElementById（“breakInput”）.value=new\u时间；
document.getElementById（“timerParagraph”）.innerHTML=new_time+“：00”；
}
//将会话时间减少5分钟
函数decreaseSession（）{
var time=document.getElementById（“sessionInput”）.value；
时间=parseInt（时间，10）；
var new_time=时间-5；
如果（时间==0）{
返回0；
}
document.getElementById（“sessionInput”）.value=new\u时间；
document.getElementById（“timerParagraph”）.innerHTML=new_time+“：00”；
}
//将会话时间增加5分钟
函数increaseSession（）{
var time=document.getElementById（“sessionInput”）.value；
时间=parseInt（时间，10）；
var新_时间=时间+5；
document.getElementById（“sessionInput”）.value=new\u时间；
document.getElementById（“timerParagraph”）.innerHTML=new_time+“：00”；
}
//倒数计时器
函数start（）{
var-sec=60；
var timerParagraph=document.getElementById（“timerParagraph”）.innerHTML；
var min=timerParagraph.substring（0，timerParagraph.indexOf（“：”）；
var时间=min*60；
min=parseInt（min，10）-1；
setInterval（函数（）{
秒=秒-1；
如果（秒<0）{
min-=1；
秒=59；
}
如果（最小值<0&&秒<0）{
clearInterval（start（））；
}
无功温度；
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“+秒；
}else if（min.toString（）.length==1&&sec.toString（）.length==1）{
document.getElementById（“timerParagraph”）.innerHTML=“0”+min+”：“+“0”+sec；
}否则{
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");
        }
    }

}

//将中断时间减少5分钟
函数decreaseBreak（）{
var time=document.getElementById（“breakInput”）.value；
时间=parseInt（时间，10）；
var new_time=时间-5；
如果（时间==0）{
返回0；
}
document.getElementById（“breakInput”）.value=new\u时间；
清除间隔（计时器）；
document.getElementById（“timerParagraph”）.innerHTML=new_time+“：00”；
}
//增加休息时间5分钟
函数increaseBreak（）{
var time=document.getElementById（“breakInput”）.value；
时间=parseInt（时间，10）；
var新_时间=时间+5；
document.getElementById（“breakInput”）.value=new\u时间；
document.getElementById（“timerParagraph”）.innerHTML=new_time+“：00”；
清除间隔（计时器）；
定时器=空；
}
//将会话时间减少5分钟
函数decreaseSession（）{
var time=document.getElementById（“sessionInput”）.value；
时间=parseInt（时间，10）；
var new_time=时间-5；
如果（时间==0）{
返回0；
}
document.getElementById（“sessionInput”）.value=new\u时间；
document.getElementById（“timerParagraph”）.innerHTML=new_time+“：00”；
清除间隔（计时器）；
}
//将会话时间增加5分钟
函数increaseSession（）{
var time=document.getElementById（“sessionInput”）.value；
时间=parseInt（时间，10）；
var新_时间=时间+5；
document.getElementById（“sessionInput”）.value=new\u时间；
document.getElementById（“timerParagraph”）.innerHTML=new_time+“：00”；
清除间隔（计时器）；
}
//倒数计时器
var定时器=null；
var-sec=60；
函数start（）{
var timerParagraph=document.getElementById（“timerParagraph”）.innerHTML；
var min=timerParagraph.substring（0，timerParagraph.indexOf（“：”）；
min=parseInt（min，10）-1；
函数onTimer（）{
秒=秒-1；
如果（秒<0）{
min-=1；
如果（最小==0&&sec==0）{
//当min和second等于零时，计时器停止
清除间隔（计时器）；
}
秒=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“+秒；
}else if（min.toString（）.length==1&&sec.toString（）.length==1）{
document.getElementById（“timerParagraph”）.innerHTML=“0”+min+”：“+“0”+sec；
}否则{
document.getElementById（“timerParagraph”）.innerHTML=min+“：”+sec；
}
}
定时器=设置间隔（onTimer，1000）；
日志（“启动计时器”）；
//单击div时，计时器启动和停止。
document.getElementById（“timerDiv”）.onclick=functi
/*
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.
    */
}

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

// 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};
}