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。就像现在一样，你有一个fork bomb。至于停止循环，您从未将$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来阻止它。在这里，我想引用@T.J. Crowder's answer，

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

滑块无限循环停止

2 个答案: