リスト項目を追加/削除/スクロールするためのJqueryコードが非常に奇妙に動作する

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によって1回挿入されています。私はこれが関連しているとは思わないので、私はそのコードを含めなかった。

Answer 1

これらの2行：非同期

.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）を呼び出します。