如何间隔地从外部JSON文件中一次解析一个数组

Question

嗨，我正在解析一个用于动画的外部JSON文件。这是类似于下面格式的推特推文。

[
 {
"title": "Don't forget to stop by the @SabaSoftware stand D52, LEARNTEC 4-6 Feb, #LEARNTEC_news",
"name": "Saba ",
"screen_name": "SabaSoftware",
"image": "https://pbs.twimg.com/profile_images/3684179000/4f4577bfda1612442ad6f8d1d737c78e_normal.jpeg"
 },
 {
"title": "Our #webinar is right around the corner, Feb. 12. See a live demo of #SabaCloud, succession & workforce planning &http://t.co/uYPV5PdPMm",
"name": "Saba ",
"screen_name": "SabaSoftware",
"image": "https://pbs.twimg.com/profile_images/3684179000/4f4577bfda1612442ad6f8d1d737c78e_normal.jpeg"
 },
 {
"title": "Exhibitors relaxing after a hard days work.  Thanks #learntec2014 for the entertainment. http://t.co/7Y70PVKQeu",
"name": "Saba ",
"screen_name": "SabaSoftware",
"image": "https://pbs.twimg.com/profile_images/3684179000/4f4577bfda1612442ad6f8d1d737c78e_normal.jpeg"
 },
 {
"title": "Live band at the exhibitor evening after a successful day at #learntec2014 http://t.co/Y0ScjbUAZU",
"name": "Saba ",
"screen_name": "SabaSoftware",
"image": "https://pbs.twimg.com/profile_images/3684179000/4f4577bfda1612442ad6f8d1d737c78e_normal.jpeg"
 },
 {
"title": "Check out @Bersin tips for building a successful #talentmanagement approach http://t.co/27rbzMUagz",
"name": "Saba ",
"screen_name": "SabaSoftware",
"image": "https://pbs.twimg.com/profile_images/3684179000/4f4577bfda1612442ad6f8d1d737c78e_normal.jpeg"
 }
]

我试图解析上面的JSON文件，我想一次读取一个数组，并在一段时间后显示html文件中的数据，再次读取下一个数组项数据，并将它们显示在html文件中。我想做的事情如下所示。

  var index;
  var tweets = [];
  $.getJSON(jsonpath, function( result ){

    var tlength = result.length-1;

        for(var i=0; i< tlength; i++)
        {
               index = i;
               tweets = result;
               loadtweet();  
        }
}

function loadTweet(){       
    $('.bubblecontainer').html();

    var tweet = tweets[index];

    $('.bubblecontainer').html('<div class="twitter-list"><ul><li class="pulse"></li</ul></div>');
    setTimeout(function(){
    setTimeout(function(){ $('.twitter-list ul li').append('<img class="slideDown" src="'+ tweet.image +'" alt="">');},500);
    setTimeout(function(){ $('.twitter-list ul li').append('<p class="bigEntrance"><strong>'+ tweet.name +'</strong> @ '+ tweet.screen_name +'</p>');},1000);
    setTimeout(function(){ $('.twitter-list ul li').append('<p class="slideLeft">'+tweet.title+'</p>');},1500);
    },6000);
}   

但是当我运行这个程序时，所有的推文都是一次出现的，它们会附加到每一个time.Where上，我就出错了。

Answer 1

试试这个

var tweets;
    var i =0;
    var tlength;
    var list;
    $.getJSON(jsonpath, function( result ){     
        tlength = result.length-1;      
        tweets = result;
        $('.bubblecontainer').html('<div class="twitter-list"><ul><li class="pulse"></li</ul></div>');  
        loadtweet();            
    });

    function loadtweet(){                       
        $('.twitter-list ul li').append('<img class="slideDown" src="'+ tweets[i].image +'" alt="">');
        $('.twitter-list ul li').append('<p class="bigEntrance"><strong>'+ tweets[i].name +'</strong> @ '+ tweets[i].screen_name +'</p>');
        $('.twitter-list ul li').append('<p class="slideLeft">'+tweets[i].title+'</p>');
        if(i<tlength){
            setTimeout(loadtweet, 2000);            
        }
        i++
    }       

Answer 2

你在同一时间为所有的tweet调用loadtweet。而不是调用loadtweet()调用setTimeout( loadtweet, 1000*i ); (根据需要调整时间)

Answer 3

所有的tweet都将在您为每个连续的tweet一个接一个地运行loadTweet函数时加载。因此，所有超时都是在同一时间启动的，所有的tweet将在6秒后出现。试试这样的东西。

$.getJSON('path/to/json', function( result ) {

    var container = $('.bubblecontainer').html('<div class="twitter-list"><ul></ul></div>'),
        list = container.find('ul');

    for(var i=0; i < (result.length - 1); i++)
    {
        setTimeout(function()
        {
            loadtweet(result[i], list);
        }, (i * 6000));
    }
}

function loadTweet(tweet, list)
{
    var $tweet = $('<li />').html(
        '<img class="slideDown" src="'+ tweet.image +'" alt="">' +
        '<p class="bigEntrance"><strong>'+ tweet.name +'</strong> @ '+ tweet.screen_name +'</p>' +
        '<p class="slideLeft">'+tweet.title+'</p>'
    );

    list.append($tweet);
}