Question

我创建了一个迭代一组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);
        }
    });
});

当然，像往常一样，我可能会想到一些可能如此简单的事情。

Answer 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

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

Answer 3

问题是褪色，而不是计时器。淡入淡出仍在执行中。你需要运行$（element）.stop（）;在所有已启动动画的元素上，否则它们将继续。

如何在jquery中杀死循环函数

3 个答案: