如何终止jquery中的循环函数

How to kill a looping function in jquery

本文关键字：循环 函数 jquery 何终止 终止      更新时间：2023-09-26

我创建了一个函数，它在一组div上迭代，循环，淡出下一个div。

我想做的是在'click'， if/else或focus时停止它。在做一些搜索时，我似乎可以利用setTimeout - clearTimeout函数。然而，我有点不清楚如何去做，也许实现它不正确。

《蝙蝠侠》

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);
        }
    });
});
当然，像往常一样，我可能想得太多了，事情可能如此简单。

这里的问题是，你停止你的计时器正确，但遗憾的是，你的计时器已经内部通过jQuery启动了另一个"计时器"的动画。你需要停止动画而不是计时器:

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);
  });
});
工作小提琴

另一种更简洁的方法是让最后一个动画完成，但设置一个值来停止任何后续的动画。

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

。

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

问题在于淡出，而不是计时器。淡出仍在执行中。你需要运行$(element).stop();在所有已经开始动画的元素上，否则它们会继续

相关文章：