2010-10-15 58 views
1

後追加我有以下代碼:jQuery的解析JSON和延遲

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數據,但並不是所有的一次,我要一步一步來,你可以給我一個想法pls.Best問候

回答

3

您可以添加基於索引更多的延遲,像這樣:

$.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()回調的第一個參數是Index,0 based,所以在上面的代碼中,第一條推文在800ms內消失,在接下來的200ms後,等等。只需根據需要微調數字即可。