8

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.

user646655
  • 131
  • 1
  • 6

3 Answers3

6

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);    
    });
});
jensgram
  • 31,109
  • 6
  • 81
  • 98
4

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.

Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208
  • 2
    @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. – Shadow The GPT Wizard Jul 28 '11 at 09:47
  • 1
    @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? – jAndy Jul 28 '11 at 10:00
  • 2
    @jAndy 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. – Shadow The GPT Wizard Jul 28 '11 at 10:07
  • 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. – Tim Büthe Jul 28 '11 at 10:08
  • @Tim fair enough, regarding other answers, that's up to the OP to decide. – Shadow The GPT Wizard Jul 28 '11 at 10:09
  • 1
    @ShadowWizard: I get your point, but even the shortest code is no excuse not to use best practices. – jAndy Jul 28 '11 at 10:15
  • @jAndy 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. – Shadow The GPT Wizard Jul 28 '11 at 10:23
  • 1
    @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? – supercat Dec 19 '14 at 21:52
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));
jAndy
  • 231,737
  • 57
  • 305
  • 359