滑块无限循环停止

Question

这是我的代码。 它的工作原理是“好”。 但是，如果它循环播放一段时间，则页面崩溃。 我也想不出一种方法，当单击按钮时如何停止循环它。 有任何想法吗？

无法提供jsfiddle演示，因为它崩溃了。

JavaScript的：

$(document).ready(function () {
    var stop = false;

    function ivSlider($element, $continue) {
        var current = $element.find('.current');
        var next = current.next();
        if (next.length == 0) next = $element.find(">:first-child");
        setInterval(function () {
            current.removeClass('current');
            next.addClass('current');
            if ($continue === true) ivSlider($element, true);
        }, 4000);
    }

    ivSlider($('.slider'), true);

});

CSS：

.slider li {
    display: none;
    float: left;
    padding-right: 10px;
}

.current {
    display: block!important;
}

HTML：

<ul class="slider">
    <li class="current">Slide 1</li>
    <li>Slide 2</li>
</ul>

Answer 1

将setInterval更改为setTimeout 。 现在，您有一个叉子炸弹 。 至于停止循环，您永远不要将$continue设置为false 。

$(document).ready(function () {
    var stop = false;
    var timeout = null;

    function ivSlider($element, $continue) {
        var current = $element.find('.current');
        var next = current.next();
        if (next.length == 0) {
            next = $element.find(">:first-child");
        }
        timeout = setTimeout(function () {
            current.removeClass('current');
            next.addClass('current');
            if ($continue === true) {
                ivSlider($element, true);
            }
        }, 4000);
    }

    ivSlider($('.slider'), true);
    $('.stop-button').click(function () {
        if (timeout) {
            clearTimeout(timeout);
        }
    });
});

Answer 2

您可以使用clearInterval停止它。 在这里，我想引用@TJ Crowder的答案 ，

setInterval设置一个循环计时器。 它返回一个句柄，您可以将其传递给clearInterval以阻止其触发。

你可以这样尝试

1）保持布尔值stop 。

2）有单独的动画制作方法。

   function animation() {
       current.removeClass('current');
       next.addClass('current');
       if ($continue === true) ivSlider($element, true);
   }

3） 用参数将单独的函数括起来，并为setInterval设置变量。

function yourFunc(stop) {
    if (stop) {
       interval = setInterval(animation, 4000);
    }
    else {
      clearInterval(interval); // STOP the animation loop
    }
}

4）单击按钮时， 将false作为参数传递以停止动画 。

 $('button').click(function () {
     yourFunc(false);
 }

---

根据您的评论更新：

 $(document).ready(function () {
     function animation() {
         var current = $('.slider').find('.current');
         var next = current.next();
         if (next.length == 0) next = $('.slider').find(">:first-child");
         current.removeClass('current');
         next.addClass('current');
         ivSlider($('.slider'), true);
     }

     function yourFunc(stop) {
         if (stop) {
             interval = setInterval(animation, 1000);
         } else {
             alert('Im going to be stopped')
             clearInterval(interval); // STOP the animation loop
         }
     }

     $('button').on('click', function () {
         yourFunc(false);
     });

     yourFunc(true);
 });  

看看这个JSFiddle