распечатать данные с помощью getJSON и loop

Question

Я получаю некоторые данные (закодированные JSON) из скрипта PHP, используя $ .getJSON. Он состоит из 10 наборов данных ({«ключ»: «данные», ...}). Я хочу распечатать все данные, сначала угасая старое жало, а затем заменив его новым и, наконец, затухающим. Это произойдет в цикле.

Когда набор данных обрабатывается, функция вызывает себя и получает следующие 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). После того, как страница загрузится и отобразится некоторая информация, функция first getText ist называется. Теперь вызывается 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); 
      } 
     } 
} 

ИЛИ

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