Question

这是负责滚动我的垂直项目列表的代码。

<script type="text/javascript">
$(document).ready(function(){

    var first = 0;
    var speed = 700;
    var pause = 8000;

        function removeFirst(){
            first = $('ul#twitter_update_list li:first').html();
            $('ul#twitter_update_list li:first')
            .animate({opacity: 0}, speed)
            .fadeOut('slow', function() {$(this).remove();});
            addLast(first);
        }

        function addLast(first){
            last = '<li style="display:none">'+first+'</li>';
            $('ul#twitter_update_list').append(last)
            $('ul#twitter_update_list li:last')
            .animate({opacity: 1}, speed)
            .fadeIn('slow')
        }

    interval = setInterval(removeFirst, pause);
});
</script>

乍一看，一切似乎都完美无瑕。但是大约10分钟后，列表项开始加起来（好像它们没有被删除）。大约15分钟后，有30个列表项（最初只有5个）。

在文档加载时，内容由ajax插入一次。我不认为这是相关的，所以我没有包含该代码。

Answer 1

这两行：

.fadeOut('slow', function() {$(this).remove();});
addLast(first);

异步运行。因此，新节点的添加速度比先前删除的节点要快。

移动addLast()，如下所示：

.fadeOut('slow', function() { $(this).remove(); addLast(first); });

它会起作用。

See it in action at jsFiddle.

Answer 2

在页面加载的ajax调用的成功处理程序中调用setInterval（removeFirst，pause）。

用于添加/删除/滚动列表项的Jquery代码表现得非常奇怪

2 个答案: