Clearing/Resetting Bound Timer/Countdown Event On Click

Question

I've a script like this:

<span class="countdown">5:00</span>

<script type="text/javascript">
$(document).ready(function() {
    var timer2 = "5:01";
    var interval = setInterval(function() {
        var timer = timer2.split(':');
        //by parsing integer, I avoid all extra string processing
        var minutes = parseInt(timer[0], 10);
        var seconds = parseInt(timer[1], 10);
        --seconds;
        minutes = (seconds < 0) ? --minutes : minutes;
        if (minutes < 0) clearInterval(interval);
        seconds = (seconds < 0) ? 59 : seconds;
        seconds = (seconds < 10) ? '0' + seconds : seconds;
        //minutes = (minutes < 10) ?  minutes : minutes;
        $('.countdown').html(minutes + ':' + seconds);
        timer2 = minutes + ':' + seconds;
    }, 1000);
});
</script>

On the same page, I have a button which is supposed to reset the timer as part of it's functionality.

$('#liveorderfeedwidget').on('click', function() {
            $(".countdown").empty();
            $('.countdown').off();
            var timer2 = "5:01";
            var interval = setInterval(function() {
                var timer = timer2.split(':');
                //by parsing integer, I avoid all extra string processing
                var minutes = parseInt(timer[0], 10);
                var seconds = parseInt(timer[1], 10);
                --seconds;
                minutes = (seconds < 0) ? --minutes : minutes;
                if (minutes < 0) clearInterval(interval);
                seconds = (seconds < 0) ? 59 : seconds;
                seconds = (seconds < 10) ? '0' + seconds : seconds;
                //minutes = (minutes < 10) ?  minutes : minutes;
                $('.countdown').html(minutes + ':' + seconds);
                timer2 = minutes + ':' + seconds;
            }, 1000);

      . . . . . . . . 

But whenever I click the button to reset the timer, it does not fully clear the first binded event.

Let's say I click the button when it is at 2:39. The timer/countdown class span flashes, says 5:00, and then goes in continuous cycle like this

2:39 5:00 2:38 4:59 2:37 4:58 etc etc

Apparently $(".countdown").empty(); and $('.countdown').off(); in my reset button timer is not working as intended.

What is needed to fully clear the previous event and refresh the .countdown to its fully reset state?

edit:

Here's a full jsfiddle with the issue observed:

https://jsfiddle.net/fw6Lzm0o/

Answer 1

You have 2 variables named interval. One is global and one is local to button onclick. Then you are missing the clearInterval() method that actually stops the timer. Then the empty or off is not required, you want to put 5:00 there.

Here is the code that needs to be changed:

$('#liveorderfeedwidget').on('click', function() {
  $(".countdown").html('5:00');
  //$(".countdown").empty();
  //$('.countdown').off();
  var timer2 = "5:01";
  clearInterval(interval); //clear the timer
  interval = setInterval(function() {
    var timer = timer2.split(':');
    //by parsing integer, I avoid all extra string processing
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = (seconds < 0) ? 59 : seconds;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    //minutes = (minutes < 10) ?  minutes : minutes;
    $('.countdown').html(minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
  }, 1000);
});

Here is the working fiddle.

Even better would be to make a function and call it on page load and on click... rather than having 2 set of exact duplicate codes. like this:

var timer2, interval;
startTimer();

$('#liveorderfeedwidget').on('click', function() {
  clearInterval(interval);
  startTimer();
});

function startTimer() {
  timer2 = "5:01";
  $(".countdown").html('5:00');
  interval = setInterval(function() {

    var timer = timer2.split(':');
    //by parsing integer, I avoid all extra string processing
    var minutes = parseInt(timer[0], 10);
    var seconds = parseInt(timer[1], 10);
    --seconds;
    minutes = (seconds < 0) ? --minutes : minutes;
    if (minutes < 0) clearInterval(interval);
    seconds = (seconds < 0) ? 59 : seconds;
    seconds = (seconds < 10) ? '0' + seconds : seconds;
    // minutes = (minutes < 10) ?  minutes : minutes;
    $('.countdown').html(minutes + ':' + seconds);
    timer2 = minutes + ':' + seconds;
  }, 1000);

}

Here is the working fiddle for this.