javascript - 重构 jQuery 以淡出并阻止它崩溃浏览器

Question

这个 js 可以工作，但一段时间后它会崩溃任何打开的浏览器。我必须关闭一些循环吗？

我还想将幻灯片效果更改为淡入/淡出（仅替换 .slideDown 不会这样做）。想法？

function ticker() {
    $('#jsTicker li:first').slideUp(function() {
        $(this).appendTo($('#jsTicker')).slideDown(1500);
    });
}
setInterval(ticker, 6000);

http://jsfiddle.net/KevinOrin/Zh3wU/

Answer 1

setInterval基本上是一个无限循环。

您当前的函数在重新开始之前不会等待 slideUp 完成。

试试这个setTimeout：

(function() {
    var tickerTimer;
    function ticker() {
        clearTimeout(tickerTimer);
        $('#jsTicker li:first').slideUp(function() {
            $(this).appendTo($('#jsTicker')).slideDown(1500, function(){
                tickerTimer = setTimeout(ticker, 6000);
            });
        });   
    }
    tickerTimer = setTimeout(ticker, 6000);
})();

Answer 2

不要使用setInterval(). 您没有考虑动画的异步行为。

尝试以下类似的方法，而不是使用setTimeout()

function ticker() {
    $('#jsTicker li:first').slideUp(function() {
        $(this).appendTo($('#jsTicker')).slideDown(1500, function() {
            setTimeout(ticker, 4500);
        });
    });
}
setTimeout(ticker, 6000);