Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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?

share|improve this question
can u provide a fiddle for this? – Rinku 6 hours ago
You need to clear the counter interval before you set it up again, otherwise you will have multiple intervals firing. – Blake Plumb 6 hours ago
@BlakePlumb I know, but I'm not sure how to do it, can you provide an answer please? – Jmlevick 5 hours ago
@Jmlevick, just posted a fiddle. Hopefully that helps. – Robert Hyatt 5 hours ago
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 5 hours ago
show 3 more comments

2 Answers

up vote 1 down vote accepted

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

clearInterval(counter);
share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.