2

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

无法提供 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>
4

2 回答 2

2

更改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);
        }
    });
});
于 2013-08-29T08:01:05.900 回答
1

您可以使用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) 在按钮单击时，传递falseas 参数以停止动画。

 $('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

于 2013-08-29T08:04:31.243 回答