How pause/resume pomodoro clock?

I don’t understand how to pause the clock. I think I have the basic premise right, but it’s not working. I’ve tried putting the pause function both inside and outside of the time function, with no change.

Code so far:

  var work = parseInt($("#wtime").html());
  var brk = parseInt($("#btime").html());
  var disp = parseInt($("#display").html());
  var sound = $("#sound")[0];
  var counting = 0;
  $("#reset").hide();
  
  $("#wdec").click(function(){
    if (work >= 1){
    work -= 1;
    }
    $("#wtime").html(work + ":00");
    $("#display").html(work + ":00");
  });  
  
  $("#winc").click(function(){
    if (work <= 55){
    work += 5;
    }
    $("#wtime").html(work + ":00");
    $("#display").html(work + ":00");
  });
  
    $("#bdec").click(function(){
    if (brk >= 1){
    brk -= 1;
    }  
    $("#btime").html(brk + ":00");
  });

  $("#binc").click(function(){
    if (brk <= 25){
    brk += 5;
    }
    $("#btime").html(brk + ":00");
  });

  $("#start").click(function(){
  var countdown = setInterval(time, 1000);
  var breaktime;
  work *= 60;
  brk *= 60;
  function time(){
    work -= 1;
    if (work === 0){
      clearInterval(countdown);
      sound.play();
      breaktime = setInterval(brktime, 1000);
    }
    if (work%60 >= 10){
      $("#display").html(Math.floor(work/60) + ":" + (work%60));
    } else {
      $("#display").html(Math.floor(work/60) + ":0" + (work%60));
    }
    $("#start").hide();
  function brktime(){
    brk -= 1;
    if (brk === 0){
      clearInterval(breaktime);
      sound.play();
      $("#start").hide();
      $("#reset").show();
    }
    if (brk%60 >= 10){
      $("#display").html(Math.floor(brk/60) + ":" + (brk%60));
    } else {
      $("#display").html(Math.floor(brk/60) + ":0" + (brk%60));
    }
   }//end of brktime
  
  }//end of time
 $("#pause").click(function(){
     if (counting == 0){  
        counting == countdown;
     } else {
       clearInterval(counting);
       counting = 0;
     }
  });
  });//end of start
  
  $("#reset").click(function(){
    work=5;
    brk=5;
    disp=5;
    $("#wtime").html(work + ":00");
    $("#btime").html(brk + ":00");
    $("#display").html(disp + ":00");
    $("#reset").hide();
    $("#start").show();
  });
});//end of doc ready

Would you mind putting your code in Codepen or other site, so we can test it easily without having to recreate files? Thanks.

Sure. It is:

https://codepen.io/velvetstar/pen/EwNENj

First of all, I suggest moving all of the functions you have nested within other functions in the document.ready callback function. They will work fine in that scope and there will be less clutter inside each function.

Next, the code which you wrote for handling pause button clicks does not do anything useful.

$("#pause").click(function(){
     if (counting == 0){  
        counting == countdown;
     } else {
       clearInterval(counting);
       counting = 0;
     }
  });

For one thing, counting is going to be 0 always because you never change it from its initial value of 0. Also, if you want to stop the current interval you must call clearInterval on it. Above you are calling clearInterval on a variable named counting which is not the intervals id. Instead you should be clearing countdown. This will then allow you to pause the clock, but you will need the last time on the clock saved somewhere, if you want to click the pause button again to restart where it left off.

I made my function time and function brktime separate from each other, but when I tried to make both functions stand alone outside of the start function, weird things happened on my timer. So I decided to leave them under the start function.

I was able to successfully pause my timer with this code:
First, I created a global variable: var paused = true;
Then I set my countdown variable to 0: var countdown = 0; and under my time function, removed the keyword var and set countdown = setInterval(time, 1000);
Last, I wrote this code for the pause function:

$("#pause").click(function(){
    if (paused && countdown !== 0){
      clearInterval(countdown);
      }
  });

Now I am having trouble resuming my timer.
I tried creating a global variable: var currentTime; and then setting that to the value on the timer’s display: disp, but that didn’t work.
I tried this code unsuccessfully:

$("#pause").click(function(){
    if (paused && countdown !== 0){
      clearInterval(countdown);
      currentTime = disp;
    } else if (paused && !countdown){
      clearInterval(currentTime);
    }
  });

What am I doing wrong?
Thanks!

I have changed my code. I am so close. Just needs a bit of tweaking, but I’m not sure where.

My start function is now independent from my time function and brktime function.

This is my new jquery code:

$("#pause").click(function(){
    if (paused && countdown !== 0){
      clearInterval(countdown);
      paused = false;
    } else if (!paused){
      setInterval(time, 1000);
    }
  });

I can click on the pause button once to pause it, and once again to resume it. But if I click on the pause button a third time, it starts counting down really fast and when it gets to break time, it displays this:

-1:0-1
-1:0-2
-1:0-3
-1:0-4

and on and on. It should display:

0:59
0:58
0:57
0:56

etc.

Suggestions?