Stop Countdown Timer Javascript onClick

Question

Given the Following code:

    $('#myButton02').click(function(){
        $('#myButton02').hide();
        $('#counter').animate({width: 'toggle'});
        var count=65;
        var counter=setInterval(timer, 1000);
        function timer(){
          count=count-1;
          if (count <= 0){
            clearInterval(counter);
            return;  }
         document.getElementById("secs").innerHTML=count + " segs.";}
    });

    $('#myButton03').click(function(){
        recognition.stop();
        $('#myButton02').show();
        $('#counter').toggle();
    });

I can have the following workflow:

User clicks a button, that button gets replaced by another one.
A div appears with a countdown timer of 65 seconds.

If the user clicks the other button (the one wich replaced the first one) the first button appears again hiding the second one and then the appeared div (#counter) dissapears. The problem is, when the user clicks the first button again, the countdown timer goes nuts and starts toggling random numbers instead of starting a new countdown (only if the user clicks it again before the first countdown stops).

How can I make the timer stops the countdown when "#myButton03" gets clicked so it "reboots itself" every time you click "#myButton02" without going nuts?

You need to clear the counter interval before you set it up again, otherwise you will have multiple intervals firing. — Blake Plumb
– Blake Plumb, Commented Jun 1, 2013 at 5:20
@BlakePlumb I know, but I'm not sure how to do it, can you provide an answer please? — Jmlevick
– Jmlevick, Commented Jun 1, 2013 at 5:30
Yep! Just solved it after reading blake's answer, I have a question, what's the difference between Robert's approach and prefixing my existing "count" variable with "window"? both approaches convert it to a global variable and the code works as expected. — Jmlevick
– Jmlevick, Commented Jun 1, 2013 at 5:44

Robert Hyatt · Accepted Answer · 2013-06-01 05:38:12Z

I agree. Make the counter variable global and have it get reset when you click myButton03. See this fiddle with a modified version of your code for a possible way of doing that:

var count;
var counter;

function resetEverything()
{
    $("#counter, #myButton03").hide();
    $('#myButton02').show();
    clearInterval(counter);  
}

$(document).ready(function(){
    resetEverything();
    $('#myButton02').click(function(){
        $('#myButton02').hide();
        $('#myButton03').show();
        $('#counter').animate({width: 'toggle'});
        count=65;
        counter=setInterval(timer, 1000);
        function timer(){
          count=count-1;
          if (count <= 0){
            clearInterval(counter);
            return;  }
         document.getElementById("secs").innerHTML=count + " secs.";}
    });

    $('#myButton03').click(function(){
        resetEverything();
    });
});

http://jsfiddle.net/Xd3UR/

Hope that helps.

Blake Plumb · Accepted Answer · 2013-06-01 05:29:38Z

1

Making the counter variable global and then adding the following line to the myButton03 click function should do the trick.

clearInterval(counter);

answered Jun 1, 2013 at 5:29

Blake Plumb

7,2593 gold badges39 silver badges56 bronze badges

Collectives™ on Stack Overflow

Stop Countdown Timer Javascript onClick

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related