Pause / Resume jQuery Countdown Timer

Question

I'm trying to make a countdown timer that can be paused with a single HTML5 button tag using a JS onClick() event, or more preferably, using jQuery with something like $("#pause_resume").off('click').on('click', firstClick) in conjunction with another function. Logically, I would assume the task would require getting the current values of both $.min and $.sec and then setting these values, while switching functions, until the "resume" button is pressed again. But I honestly have no idea how to go about doing this. I've looked at other code on this site and others, but what I saw was heavily deprecated and not in line with my project plan. Any insight is appreciated.

HTML:

<p class="timer">
   <span class="min"></span>:<span class="sec"></span>/
   <span class="fullTime">1:30</span>
</p>

JavaScript:

<script type="text/javascript">
    var timer = $('.timer');
    var leadingZero = function(n) {
        if (n < 10 && n >= 0)
            return '0' + n;
        else
            return n;
    };
    var minutes = 1;
    var seconds = 30;
    setInterval(function () {  
        var m = $('.min', timer),
            s = $('.sec', timer);
        if (seconds == 0) {
            minutes--;
            seconds = 59;
        } else {
            seconds--;
        }
        m.text(minutes);
        s.text(leadingZero(seconds));

    }, 1000);
</script>

Answer 1

Well, I think this is what you want. http://jsfiddle.net/joey6978/67sR2/3/

I added a button that toggles a boolean on click to determine whether to set your function in the interval or to clear the interval.

var clicked=true;
var counter;
$('button').click(function(){
    if(clicked){
       counter=setInterval(function () {  
         var m = $('.min', timer),
         s = $('.sec', timer);
         if (seconds === 0) {
           minutes--;
           seconds = 59;
         } else {
           seconds--;
         }
         m.text(minutes);
         s.text(leadingZero(seconds));
       }, 1000);
   }
   else{
     clearInterval(counter);
   }
   clicked=!clicked;
});