I have a fairly plex page with lots of ajax calls and subsequent dom manipulation. On one particular call it sets an interval with a time limit(essentially a timer). I have set up clearInterval() everywhere and even in the function but in very particular use cases(it is plex and I can't determine the exact cause and steps to reproduce the defect) .

$(function() {
  window.timer_interval; 
  // ...
})
function timer()
{
    var current = 0; 
    time_limit = 60;                                
    window.timer_interval = setInterval(function() {
        minute = ( "0" +  Math.round(Math.floor((time_limit - current)/60))).slice(-2); 
        seconds = ("0" + ((time_limit - current)%60)).slice(-2); 

        $('#timer').html(minute + ":" + seconds);

        if (current >= time_limit) {
            clearInterval(window.timer_interval); 
            window.timer_interval = false; 
        }
        current = current + 1; 
    }, 1000);
}

I have used firbug to detect the value for window.timer_interval , it is false and even the condition is satisfied.One thing might be that that a couple of image transfers fail (this is possible application behaviour with code written to gracefully degrade). I am developing in Mozilla.

I have a fairly plex page with lots of ajax calls and subsequent dom manipulation. On one particular call it sets an interval with a time limit(essentially a timer). I have set up clearInterval() everywhere and even in the function but in very particular use cases(it is plex and I can't determine the exact cause and steps to reproduce the defect) .

$(function() {
  window.timer_interval; 
  // ...
})
function timer()
{
    var current = 0; 
    time_limit = 60;                                
    window.timer_interval = setInterval(function() {
        minute = ( "0" +  Math.round(Math.floor((time_limit - current)/60))).slice(-2); 
        seconds = ("0" + ((time_limit - current)%60)).slice(-2); 

        $('#timer').html(minute + ":" + seconds);

        if (current >= time_limit) {
            clearInterval(window.timer_interval); 
            window.timer_interval = false; 
        }
        current = current + 1; 
    }, 1000);
}

I have used firbug to detect the value for window.timer_interval , it is false and even the condition is satisfied.One thing might be that that a couple of image transfers fail (this is possible application behaviour with code written to gracefully degrade). I am developing in Mozilla.

• javascript
• jquery
• html
• browser

Share Improve this question Follow edited Jan 29, 2019 at 21:53 Daniel Gimenez 20.8k44 gold badges5858 silver badges7777 bronze badges asked Aug 11, 2013 at 13:59 SuperqSuperq 15333 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

My guess is that you're setting the interval, and then setting the interval again without clearing it first, so that whatever was set previous will run forever.

If I am right adding a check to clear the interval before setInterval will correct the problem. I've created a function to the code below that will take place when you call setInterval.

// starts an interval function, making sure to cancel one that is previously running
function startSharedInterval(func) {
    if (window.timer_interval) {
        clearInterval(window.intervalID);
        window.timer_interval = 0;
    }

    window.timer_interval = setInterval(func, 1000);
};

// ... in timer() 
startSharedInterval(function () {
    minute = ( "0" +  Math.round(Math.floor((time_limit - current)/60))).slice(-2)  ; 
    // ... rest of code
});

If you only have one timer, then you can avoid using global scope and take advantage of using closures so that the timer is always cleared.

In the code below, interval_id is created in the parent timer() function. This will be available to the inner anonymous function to clear when its execution after 60 is pleted. You may have multiple instances running simultaneously this way.

function timer() {

    var current = 0;
    var time_limit = 60;
    var interval_id = setInterval(function () {

        minute = ("0" + Math.round(Math.floor((time_limit - current) / 60))).slice(-2);
        seconds = ("0" + ((time_limit - current) % 60)).slice(-2);

        $('#timer').html(minute + ":" + seconds);

        if (current >= time_limit) {
            clearInterval(interval_id);
        }
        current = current + 1;
    }, 1000);
}