Stopping a running function in javascript/jquery on click event

Question

I have a slideshow function in jquery that I want to stop on a particular click event. The slideshow function is here:

function slider(){
   setInterval(function(){
   var cur = $('img.active');
   cur.fadeOut('fast');
   cur.removeClass('active');
   cur.css('opacity','0');
   cur.addClass("hidden");
   var nextimg;
   if (!cur.hasClass("last")){
     nextimg = cur.next("img");
     }
   else {
     nextimg = cur.prev().prev().prev();
  }
   nextimg.removeClass("hidden").fadeIn('slow').css('opacity','1').addClass('active');
  },5000);
 }

I have been reading about .queue but not sure how I can use it exactly, can I call my function from a queue and then clear the queue on a click event? I cannot seem to figure out the syntax for getting it to work of if thats even possible. Any advice on this or another method to stop a running function on a click would be appreciated.

setInterval can be undone with clearInterval. see: stackoverflow.com/questions/6886361/… — wrschneider
– wrschneider, Commented Dec 3, 2011 at 18:33

Kevin Ennis · Accepted Answer · 2011-12-03 18:52:07Z

3

For what it's worth, it's generally advisable to use a recursive setTimeout instead of a setInterval. I made that change, as well as a few little syntax tweaks. But this is a basic implementation of what I think you want.

// Store a reference that will point to your timeout
var timer;

function slider(){
    timer = setTimeout(function(){
        var cur = $('img.active')
                .fadeOut('fast')
                .removeClass('active')
                .css('opacity','0')
                .addClass('hidden'),
            nextimg = !cur.hasClass('last') ? cur.next('img') : cur.prev().prev().prev();
        nextimg.removeClass('hidden')
            .fadeIn('slow')
            .css('opacity','1')
            .addClass('active');
        // Call the slider function again
        slider();
    },5000);
 }

$('#someElement').click(function(){
    // Clear the timeout
    clearTimeout(timer);
});

answered Dec 3, 2011 at 18:52

Kevin Ennis

14.5k2 gold badges46 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thesteve Over a year ago

Wow, thanks for that man, that is the code I wanted to write, thanks for not only answering my question but showing me what cleaner code looks like.

Steve Wellens · Accepted Answer · 2011-12-03 18:32:48Z

1

Store the result of setInterval in a variable.

Then use clearInterval to stop it.

answered Dec 3, 2011 at 18:32

Steve Wellens

20.6k2 gold badges31 silver badges70 bronze badges

2 Comments

thesteve Over a year ago

Would it need to be a global variable?

Kevin Ennis Over a year ago

Doesn't necessarily have to be global, but it needs to be outside the scope of your slider function to be accessible from your click handler.

ExpExc · Accepted Answer · 2011-12-03 18:33:52Z

1

Store the value returned by setInterval, say intervalId to clear it, your click handler should look like this:

function stopSlider() {
    //prevent changing image each 5s
    clearInterval(intervalId);
    //stop fading the current image
    $('img.active').stop(true, true);
}

answered Dec 3, 2011 at 18:33

ExpExc

3,9361 gold badge19 silver badges20 bronze badges

Collectives™ on Stack Overflow

Stopping a running function in javascript/jquery on click event

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related