clearInterval(); not working

Question

I'm making an image scroller that automatically advances the image every few seconds (10 seconds for the sake of debugging) or when the user clicks the image. My code (shown below) works, although I'd like to "reset" the 10 second counter if a manual (click) advancement of the image is done. How can I do this? I seem to be having no luck with clearInterval.

... 
setInterval('gallery()',10000);
$("#gallery").click(function() {
clearInverval();// <--- not working
gallery();
});
…

I see others defining a variable as (in my case) setInterval('gallery()',10000); but I couldn't get that to work either =/

PS I have limited knowledge of languages other than C

Guffa · Accepted Answer · 2013-04-14T02:51:04.533

4

The setInterval method returns a handle to the interval, which you use to stop it:

var handle = window.setInterval(gallery,10000);
$("#gallery").click(function() {
  window.clearInterval(handle);
  gallery();
});

edited Apr 14 '13 at 02:51

answered Apr 14 '13 at 02:41

Guffa

687,336
108
737
1,005

score 3 · Answer 2 · answered Apr 14 '13 at 03:28

May be you can do something like this:

var handle = setInterval(gallery,10000);
$("#gallery").click(function() {
    clearInterval(handle);

    /*
     * your #gallery.click event-handler code here
     */

    //finally, set automatic scrolling again
    handle = setInterval(gallery,10000);
});

Jeff Shaver · Answer 3 · 2013-04-15T10:44:31.770

1

You need to set the setInterval as a variable for this to work..

var interval = setInterval(gallery, 10000);
$('#gallery').click(function() {
    clearInterval(interval);
});

edited Apr 15 '13 at 10:44

answered Apr 14 '13 at 02:41

Jeff Shaver

3,315
18
19

Doing so broke my click handler entirely =/ – Apr 14 '13 at 02:51

score 0 · Answer 4 · answered May 11 '14 at 12:47

I struggled to make a simple pause/continue handler when doing prototype based coding and did not want to use any external plugin because of this.

The code below is pretty self-explanatory and will hopefully save other coders time.

Non-functional example:

    /** THIS DID NOT WORK 
    function Agent( name )
    {
         this.name = name;
         this.intervalID = undefined; // THIS DID NOT WORK!!!
    } // constructor

    Agent.prototype.start = function( speed )
    {
        var self = this;
        this.intervalID = setInterval( function(){ self.act(); }, speed );
    }; // start

    Agent.prototype.pause = function()
    {
        clearInterval( this.intervalID );
        console.log( "pause" );
    }; // pause
    **/

Instead you have to do it like this:

var intervalID = undefined;
function Agent( name )
{
     this.name = name;
} // constructor

Agent.prototype.start = function( speed )
{
    var self = this;
    intervalID = setInterval( function(){ self.act(); }, speed );
}; // start

Agent.prototype.pause = function()
{
    clearInterval( intervalID );
    console.log( "pause" );
}; // pause

clearInterval(); not working

4 Answers4

Linked