Question

My website works in a way so that any links clicked do not load a new page but however trigger a .load() event into a div named “content”.

Everything has been nice and dandy but now I have run into a small problem.

On one of the content pages, I have the following code:

    $('.count').each(function () {
        $this = $(this);
        countdown = setInterval(function(){
            countnow = parseInt($('.remain', $this).html());
            $('.remain', $this).html(countnow-1);
        }, 1000);
        return false;
    });

The code works… it works very well. But when I load that same page again, it seems like the code is running twice because the seconds are going down by 2 at a time. Then when I load it again, it’s going down by 3 seconds at a time. Another load, and it goes down by 4 seconds at a time. I load it a couple more times and it goes down faster then I can read.

I tried giving the .count divs their own unique id’s (the .remain div is nested inside the .count div), even when pages are subsequently loaded the id is still entirely different and this did not fix my problem. I also tried putting clearInterval(countdown) right before the function but that just made it stop working entirely. Any suggestions?

And yes I know the countdown doesn’t currently stop when it reaches 0.

Answer 1

Try this:

var countdown;
$('.count').each(function () {
    $this = $(this);
    if (!countdown) 
        countdown = setInterval(function(){
            countnow = parseInt($('.remain', $this).html());
            $('.remain', $this).html(countnow-1);
        }, 1000);
    return false;
});