使用 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);
}

有一些警报会显示正确的数据集，但没有它们只会显示数据集中的最后一个或第一个数据。有人可以帮我吗？！

简化后只有一个 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);
          }
      }
}

或

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