无法暂停计时器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很有帮助，它描述了一个具有增量计时准确性的可暂停计时器。

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