restarting a setInterval

Question

So I have a timer rotates a set of images ever 5 seconds. Therefore, I am running this upon document launch.

$(document).ready(function() {
var intervalID=setInterval(function(){ 
     rotate();    
}, 5000);
});

The Rotate function simply just rotates the images. However, I also allow the user to manually select what image they are looking at. Because of this I need to cancel the SetInterval and then start it over back at 5 seconds again

What I am trying to do is cancel the interval then start it over by doing this

$('a').click(function(){
 clearInterval(intervalID);   
 intervalID=setInterval(function(){ 
     rotate();    
}, 5000);    
});

However, the code doesn't seem to reset the interval like I had hoped.

Germaun

OT: Instead of setInterval(function(){rotate();}, 5000) you can write setInterval(rotate, 5000). – Dornick

Answer 1

Just make intervalID be global variable by declaring it outside and above all functions.

With your current code its scope is limited to $(document).ready() method so it might cause the problem you describe.

Pulverable

@Tim thanks for the advice and sharing your personal opinion but until I'll see proof why they're so bad I'll keep using them. – Pulverable

@ShadowWizard: Global variables are the slowest to access, you're possibly colliding with other scripts in the global namespace, it's tough to read code where variables are declared "somewhere" out of scope, .. shall I continue? – Aeronautics

@Aeronautics might be true when you have lots of code, but this doesn't look like the case here. When the initial code is simple, I prefer to stick with simple code and just moving one line to be outside a function looks like the most simple solution to me. I'm not trying to give the perfect answer/solution just something the OP will understand best and will be easy to implement. – Pulverable

I won't go into arguing about global variables, other have done that enough. The thing is, if you have errors because your global is clashing with some library, you will have a hard time finding it. Besides, others have answered this question and provide elegant solutions that not longer or harder to implement. – Selah

@Tim fair enough, regarding other answers, that's up to the OP to decide. – Pulverable

@ShadowWizard: I get your point, but even the shortest code is no excuse not to use best practices. – Aeronautics

@Aeronautics well, the anonymous self invoking method you gave looks like the best practice indeed but until I have some time to learn it in depth myself, I can't really give this in my answers. – Pulverable

@jAndy: If global variables are given names like supercatWizlibTimer how much of a problem are they? While it might be better to have a single supercatWizlib catch-all variable for the library and use something like supercatWizlib.timer, how different is that really from simply using distinct global variables? – Vennieveno

Answer 2

If the intervalID variable is declared within the .ready() scope, the following ought to work (untested):

$(document).ready(function() {
    var rotate = function() { ... },
        intervalID = setInterval(rotate, 5000);

    $('a').click(function() {
       clearInterval(intervalID);   
       intervalID = setInterval(rotate, 5000);    
    });
});

Nefarious

Answer 3

Well, it looks like you are declaring interverID locally within the anonymous function from your .ready() handler. I'm actually wondering why you don't face a Reference error in your click-event handler, since intervalID cannot be known there.

You need to make sure that this variable is available and does have a shared context for both functions. Easiest way to go, create an anonymous self invoking method around your script and declare that variable out of scope.

(function _myPrivateContext($, window, document, undefined) {
    var intervalID = null;

    $(document).ready(function() {
       intervalID = setInterval(rotate, 5000);
    });

    $('a').click(function(){
        clearInterval(intervalID);   
        intervalID = setInterval(rotate, 5000);    
    });

}(jQuery, window, document));

Aeronautics

Don't think you want to be setting onclick handlers before the DOM is loaded. You could try live(). – Senary