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.

Answer 1

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);    
    });
});

Answer 2

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.