How to kill a looping function in jquery

Question

I created a function that iterates over a set of divs, looping, fading in and out the next one.

What I am trying to do is to stop it upon either 'click', if/else, or focus. In doing some searching, it seems that I can utilize the setTimeout - clearTimeout functions. However I am a bit unclear on how to go about it, and maybe implementing it incorrectly.

Fiddle Me This Batman

HTML:

<a href="#" class="killFunc">Kill Loop Function</a>
<div id="productBox">
    <h3>Dynamic Title Here</h3>

    <div class="divProduct">
        <!-- product image -->
        <div class="product-discription">
            <h4>Product 1</h4>
            <p>Cras justo odio, dapibus ac facilisis in.</p>
            <a href="#">Learn More</a>
        </div>
    </div>

    <!-- Repeat '.divProduct' over and over -->

</div>

JS:

timer = null;

function productTypeCycle(element) {

    timer = setTimeout(function() {

        element.fadeIn()
               .delay(1000)
               .fadeOut(function() {
                   if(element.next().length > 0) {
                       productTypeCycle(element.next());
                   }
                   else {
                       productTypeCycle(element.siblings(":nth-child(2)"));
                   }
              });
   }, 500);
}

$(document).ready(function() {
    productTypeCycle($(".divProduct:first"));
    $(".killFunc").click(function(e) {
        e.preventDefault();
        if(timer !== null) {
            clearTimeout(timer);
        }
    });
});

Of course, as usual, I am probably way over thinking something that could be so simple.

What is the problem? Are you sure it is the timeout and not the animation? — epascarello, Jun 05 '13 at 13:13

luk2302 · Accepted Answer · 2013-06-05T13:47:32.987

1

the problem here is that you stop your timer correctly, but sadly your timer has internally via jQuery started another "timer" for the animations. you would need to stop the animation instead of the timer:

var animationEle = null;
function productTypeCycle(element) {
  animationEle = element;
  element.fadeIn()
    .delay(1000)
    .fadeOut(function () {
    if (element.next().length > 0) {
      productTypeCycle(element.next());
    } else {
      productTypeCycle(element.siblings(":nth-child(2)"));
    }
  });
}

$(document).ready(function () {
  productTypeCycle($(".divProduct:first"));
  $(".killFunc").click(function (e) {
    e.preventDefault();
    if (animationEle)
      $(animationEle).stop(true, false);
  });
});

working fiddle

edited Jun 05 '13 at 13:47

answered Jun 05 '13 at 13:21

luk2302

55,258
23
97
137

I knew I was over thinking this. This makes much more sense. Thanks! And thank you @Javalsu, for your answer below. – jremydeaton Jun 05 '13 at 13:40
maybe you want to alter the arguments of stop(), just look in the [documentation](http://api.jquery.com/stop/) to get their meaning. – luk2302 Jun 05 '13 at 13:42
Yeah. I did alter .stop() to fit my needs. – jremydeaton Jun 05 '13 at 13:44

score 1 · Answer 2 · answered Jun 05 '13 at 13:27

Another (cleaner) way to go about it, is to let the last animation finish, but set a value to stop any further animations.

http://jsfiddle.net/hhwfq/54/

Like this.

timer = null;
var animationCancelled = false;
function productTypeCycle(element) {

    timer = setTimeout(function() {        
        element.fadeIn()
               .delay(1000)
               .fadeOut(function() {
                   if(animationCancelled) return;
                   if(element.next().length > 0 ) {
                       productTypeCycle(element.next());
                   }
                   else {
                       productTypeCycle(element.siblings(":nth-child(2)"));
                   }
              });
   }, 500);
}

$(document).ready(function() {
    productTypeCycle($(".divProduct:first"));
    $(".killFunc").click(function(e) {
        e.preventDefault();
        if(timer !== null) {
            clearTimeout(timer);            
            animationCancelled = true;
        }
    });
});

score 0 · Answer 3 · answered Jun 05 '13 at 13:12

0

The issue is the fade, not the timer. The fade is still executing. You need to run $(element).stop(); on all the elements that have started an animation otherwise they'll just continue.

answered Jun 05 '13 at 13:12

Smeegs

9,151
5
42
78

How to kill a looping function in jquery

3 Answers3