Can't pause the timer setInterval()

Question

I need to add the pause function to the timer.

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

  });

});

I give you a hint: declare `counter` globally and do `clearInterval(counter);` inside the pause click handler — empiric, Feb 22 '17 at 14:48
Another option: `var paused=false;` ... `if (paused) return;` ... `$("#pause").click( .. paused=!paused ...` — freedomn-m, Feb 22 '17 at 15:11

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

var counter;
counter = setInterval(timer, 1000)

clearInterval(counter); // releases interval

Here's a fiddle to demonstrate the general idea.

You may also find this answer helpful, which describes a pausable timer with delta timing for accuracy.

edited May 23 '17 at 12:00

Community

1
1

answered Feb 22 '17 at 14:51

Rich

3,156
3
19
29

lntl · Answer 2 · 2017-02-22T17:00:18.037

I try something,

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

Can't pause the timer setInterval()

2 Answers2