Question

can anyone see what is wrong with the following code. it’s supposed to display a count down from 30 and afterwards it refreshes the page with jquery’s ajax load() function.

it works fine for the first or second count down but then the timer starts too count down to fastand sometimes goes to the negative numbers and does not stop at all

what am i doing wrong?

function refreshPage(){
    stopRefresh();
    $('div.yui-content').load('rdPage.aspx div.yui-content', doCalculation);
}

function stopRefresh(){
    clearTimeout(timer);
    clearTimeout(interval);
}

var count, timer, interval;

function startTimer(){
    count = 30;
    timer = setTimeout(refreshPage,count * 1000);
    interval= setInterval(updateTimer,1000);
}
function updateTimer(){
    count --;
    $('#timerSpan').text("Refreshing in " + count + "s");
}


function doCalculation(){
    negativeNumberRed();
    startTimer();

}

edit: added doCalculations()

Answer 1

Add a call to “stopRefresh()” to the “startTimer()” call.

function startTimer(){
    stopRefresh();
    count = 30;
    timer = setTimeout(refreshPage,count * 1000);
    interval= setInterval(updateTimer,1000);
}

My guess is that your code is managing to start up more than one instance of the interval timer. They’ll all decrement the same counter.

edit — oops – Dr. Strangelove is correct – you need to use “clearInterval()” on interval timers, and “clearTimeout()” for timeout timers. (edit again well, you probably should do that, but Chrome at least seems to stop interval timers via “clearTimeout()”. Here is the jsfiddle.