如何杀死jquery中的循环函数答案

【问题标题】：How to kill a looping function in jquery如何杀死jquery中的循环函数
【发布时间】：2013-06-05 13:08:53
【问题描述】：

我创建了一个函数，它遍历一组 div、循环、淡入和淡出下一个。

我想要做的是在“点击”、if/else 或焦点时停止它。在进行一些搜索时，我似乎可以利用 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);
        }
    });
});

当然，像往常一样，我可能想得太简单了。

【问题讨论】：

有什么问题？你确定是超时而不是动画？
动画可以满足我的需要。
添加abled状态来控制是否循环？

标签： javascript jquery loops settimeout kill

【解决方案1】：

这里的问题是你正确地停止了你的计时器，但遗憾的是你的计时器已经通过 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);
  });
});

working fiddle

【讨论】：

我知道我想太多了。这更有意义。谢谢！并感谢@Javalsu，您的回答如下。
也许您想改变 stop() 的参数，只需查看 documentation 即可了解它们的含义。
是的。我确实改变了 .stop() 以满足我的需要。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：