可以在jquery中使用ajax进行正确的循环

时间:2017-02-10 23:56:34

标签: jquery ajax

我总是从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');  
               });                    
           });
});

1 个答案:

答案 0 :(得分:1)

我假设您尝试每隔5秒在#news中显示一段新内容。当您使用delay(5000)时,它不会等待最后一个延迟事件完成,然后按顺序触发下一个延迟事件。

而是尝试将AJAX返回的数据保存到数组中,并创建一个遍历此数组的函数。使用javascript的setTimeout每5秒触发一次新功能,直到新闻用完为止。

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();
});