0

$.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) は 1 つだけです。ページがロードされ、いくつかの情報が表示された後、関数 getText が初めて呼び出されます。ここで PHP スクリプトが呼び出され、10 個のデータセットを受け取ります。それらのそれぞれは、関数が再び自分自身を呼び出す前に表示されます。例: フェード イン ラッパー、表示データ #1、フェード アウト ラッパー。フェード イン ラッパー、データ #2 の表示、フェード アウト ラッパーというように、すべてのデータ (10 個のうち) が表示されなくなるまで続きます。ループは何らかの形でアニメーションを待つ必要があります。また、ラッパー内のテキストは置き換えられます。

4

2 に答える 2

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

          });
    }
于 2012-05-13T10:42:34.460 に答える
0

それで、これはあなたが探しているものだと思います..

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();
       }
   }); 
}
于 2012-05-13T10:34:31.667 に答える