Question

大家好我正在解析动画的外部JSON文件。这是Twitter推文，如下面的格式。

[
 {
"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 &amp; workforce planning &amp;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文件以上，我想一次读取一个数组并在一些Interval之后显示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);
}

但是当我运行这个时，所有的推文都会一次出现而且每次都会附加。我哪里出错了。

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

您正在同时为所有推文调用loadtweet。而不是致电loadtweet()来电setTimeout( loadtweet, 1000*i );（调整时机以适应）

Answer 3

当您为每个连续的推文一个接一个地运行loadTweet函数时，将加载所有推文。因此，您的超时都是在同一时间启动的，所有推文都会在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);
}

如何在Intervals中从外部JSON文件一次解析一个数组

3 个答案: