jqueryでajaxを使用して適切なループを行うことができません

Question

私はいつもjsonファイルから最後の値を取得し、5秒ごとにフェードします。私は何をすべきなので、jsonの各価値が現れて消えますか？ :(

$.ajax({ 
     type:'GET', 
     url: root + '/posts/1/comments' 
      }).then(function(data){  
      $.each(data,function(i, content) { 
      $('#news').html('<h3>'+ content.name + '</h3><p>' + content.name +'</p>) 
         .fadeIn().delay(5000).fadeOut('slow'); 
       });      
      }); 
}); 

Answer 1

イムあなたが#newsで5秒ごとにコンテンツの新しい作品を表示しようとしている。あなたはdelay(5000)を使用する場合、それは順番に次のものを発射する前に終了する最後の遅延イベントを待っていないと仮定。

代わりに配列にAJAXによって返されたデータを保存しようとすると、この配列によってその反復処理する関数を作成します。それはニュース項目を使い果たすまで、5秒ごとに新しい機能を発射するためにはJavaScriptのsetTimeoutを使用してください。

var news, 
    newsCount, 
    i; 

function updateNews(){ 
    if (i < newsCount) { 
     // add news[i] to your HTML here // 
     i++; 

     setTimeout(function(){ 
      updateNews(); 
     },5000); 
    } 
} 

$.ajax({ 
    type: 'GET', 
    url: root + '/posts/1/comments' 
}).then(function(data) { 
    news = data; 
    newsCount = news.length; 
    i = 0; 
    updateNews(); 
});