Jquery解析JSON并延迟后追加

Question

我有以下代码:

function loadTweets() {
    $('#mainForm').submit(function(){
        return false;
     });  

    $('#send').click(function(){
                $('#tweets').html('');
                var searchTerm = $('#search').val();
                var baseUrl = "http://search.twitter.com/search.json?q=";
                $.getJSON(baseUrl + searchTerm + "&callback=?", function(data) {
                console.log(data);
                $.each(data.results, function() {
                $('<div></div>')
                .hide()
                .append('<img src="' + this.profile_image_url + '" />')
                .append('<span><a href="http://www.twitter.com/'
                +
                this.from_user + '" target="_blank">' + this.from_user
                +
                '</a>&nbsp;' + this.text + '</span>')
                .appendTo('#tweets')
                .delay(800)
                .fadeIn();
                });
            }); 

    });
}
$(document).ready(function() {
   loadTweets();
});

代码工作正常，但我想 append 到 div 'tweets'，来自 JSON 的数据，但不是一次性全部，我想要一步一步，你能给我一个想法吗？最诚挚的问候

Answer 1

您可以根据索引添加更多延迟，如下所示:

$.each(data.results, function(i) {
  $('<div></div>').hide()
    .append('<img src="' + this.profile_image_url + '" />')
    .append('<span><a href="http://www.twitter.com/' +
             this.from_user + '" target="_blank">' + this.from_user +
             '</a>&nbsp;' + this.text + '</span>')
    .appendTo('#tweets')
    .delay(800 + 200 * i)
    .fadeIn();
});

第一个参数.each()回调是基于 0 的索引，因此在上面的代码中，第一条推文会在 800 毫秒内淡入，接下来的 200 毫秒后淡入，依此类推。只需根据需要微调数字即可。