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?

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?

• javascript
• jquery

• can u provide a fiddle for this? – Rinku Commented Jun 1, 2013 at 5:19
• You need to clear the counter interval before you set it up again, otherwise you will have multiple intervals firing. – 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 Commented Jun 1, 2013 at 5:30
• @Jmlevick, just posted a fiddle. Hopefully that helps. – Robert Hyatt Commented Jun 1, 2013 at 5:41
• 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 Commented Jun 1, 2013 at 5:44

2 Answers 2

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/Xd3UR/

Hope that helps.

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

clearInterval(counter);