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

Код работает нормально, но я хочу добавить в div «твиты», данные из 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 мс и т. д. Просто настройте числа по мере необходимости.