无法暂停计时器 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

这是展示一般想法的小提琴。

您也可能会发现此答案有帮助，该答案描述了一个可停止的计时器，并具有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);
}