使用getJSON和循環打印數據

Question

我使用$ .getJSON從PHP腳本接收一些數據（JSON編碼）。它由10個數據集（{「key」：「data」，...}）組成。我想先打印出所有的數據，然後用新的數據替換舊的數據，最後將其刪除。這將在一個循環內發生。

處理數據集時，函數會自行調用並獲取下10個數據集來打印它們。等等。

function getText(){ 

    $.getJSON("getText.php", 
     function(data){ 
      for(key in data){ 
       //alert(key); 
       if($("#wrapper").css("display") == "block") 
        $("#wrapper").fadeOut(500); 

       $("#wrapper").html(data[key]).fadeIn(500); 
      } 
    }); 
    //alert("end"); 

    setTimeout(function(){ 
     getText(); 
    },20000); 
} 

隨着一些警報正確數據集顯示，但沒有他們剛剛從數據集中的最後或第一數據displayed.Can有人幫我請？

簡化只有一個div（#wrapper）。在頁面加載並顯示一些信息之後，函數getText被稱爲第一次。現在調用PHP腳本，我們收到十個數據集。在函數再次調用之前，每個函數都應該顯示。例如：淡入包裝，顯示數據＃1，淡出包裝;淡入包裝，顯示數據＃2，淡出包裝，等等，直到每個數據（十分之一）都不顯示。循環應該以某種方式等待動畫。包裝中的文字應該被替換。

Answer 1

鑑於你更新試試這個：

function getText(){ 
var storage = {}; 
$("#wrapper").html('').fadeOut(500); 
    $.getJSON("getText.php", 
     function(data){ 
     storage.data = data; 
        }); 
    for (var i in storage.data) 
     { 
      $("#wrapper").html(storage.data[i]).fadeIn(500).delay(5000).fadeOut(500); 
      if (i == storage.data.length-1) 
      { 
       setTimeout(function(){ 
       getText(); 
       },50000); 
      } 
     } 
} 

OR

setInterval('getText',20000); 
function getText(){ 
    var storage = {}; 
     $.getJSON("getText.php", 
      function(data){ 
      i = (typeof(storage.i) != "undefined") ? storage.i : 0; 
     setInterval(function() { 
       $("#wrapper").fadeOut(500).html(storage.data[i]).fadeIn(500); 
storage.i = i+1; 
},2000); 

      }); 
    } 

Answer 2

那麼，我想，這是你+/-要找的內容..

function getText(){ 
    $.getJSON("getText.php", function(data) { 
     var keys = []; 
     for(var key in data){ 
      keys.push(key); 
     } 

     function displayData() { 
      var key = keys.pop(); 
      $("#wrapper").html(data[key]).fadeIn(500, function(){ 
      if(keys.length>0) { 
       // Still some data available .. 
       displayData(); 
      } else { 
       // All data has been displayed .. get some new from server .. 
       getText(); 
      } 
      }); 
     } 

     // If some data is available, show first .. 
     if(keys.length>0) { 
      displayData(); 
     } 
    }); 
}