2010-10-15 5 views
1

Je le code suivant:Jquery parser JSON et append après un délai

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

Le code fonctionne très bien, mais je veux ajouter à la div « tweets », les données du JSON, mais pas tous à la fois, Je veux pas à pas, pouvez-vous me donner une idée pls.Best concernant

Répondre

3

vous pouvez ajouter plus de retard en fonction de l'indice, comme celui-ci:

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

le premier paramètre à la fonction de rappel est le .each() index, 0 basé, de sorte que dans le code ci-dessus le premier tweet s'estompe en 800ms, les 200ms suivants plus tard, etc Juste affiner les chiffres selon les besoins.