无法暂停计时器setInterval（）

Question

我需要将暂停功能添加到计时器。

https://codepen.io/ccw13/pen/WpevOe?editors=0010

$(document).ready(function() { 
    var buzzer = $("#buzzer")[0] 
    var num = parseInt($("#timerNum").html()); 

    $("#start").click(function() { 
    var counter = setInterval(timer, 1000); 

    function timer() { 
     $("#start").hide(); 
     num -= 1; 
     if (num === 0) { 
     //buzzer.(play); 
     $("#start").show(); 
     clearInterval(counter); 
     } 
     $("#timerNum").html(num); 
    } 
    }); 

    $("#reset").click(function() { 
    num = 24; 
    $("#timerNum").html(num); 

    }); 

}); 

Answer 1

var counter; 
counter = setInterval(timer, 1000) 

clearInterval(counter); // releases interval 

这里有一个fiddle展示的总体思路。

您可能还会发现this answer有帮助，它描述了一个带有delta时序的可定时计时器，以实现准确性。

Answer 2

我试一下，

var num; 
    var interval; 

    $(document).ready(function(){ 

    var buzzer = $("#buzzer")[0] 
    num = parseInt($("#timerNum").html()); 

    $("#start, #reset, #pause").click(function(e){ 
     getAction(e); 
    }); 
    }); 

function getAction (target){ 
    action = target.currentTarget.id; 
    switch (action) { 
    case "start": 
     $("#start").hide(); 
     timer(action, num); 
    break; 
    case "reset": 
     num=24; 
     $("#timerNum").html(num); 
     $("#start").show(); 
     clearInterval(interval); 
    break; 
    case "pause": 
     num = parseInt($("#timerNum").html()); 
     clearInterval(interval); 
     $("#start").show(); 
    break; 
    } 

} 

function timer(action, num){ 
    interval = setInterval(function(){ 
     num-=1; 
     $("#timerNum").html(num); 
    }, 1000); 
}