2

さて、私は自分が取り組んでいるプロジェクトのために小さなチャットシステムを書いています。その過程でAJAXを学ぼうとしてきましたが、すべて順調に進んでいるようです。私のAJAXはディレクトリを開くPHPページを実行し、AJAXはページからディレクトリを配列（DirectoryList）として受け取ります。次に、すべてのチャットログがDIVに追加されるまで、別のAJAX関数を繰り返しロードします。

私の問題は、ChatLogsが正しい順序でロードされないことです。

たとえば、ログがある場合：

  • 1.txt
  • 2.txt
  • 3.txt
  • 4.txt

それらは、ChatContainerDIVに次のように追加されます。

  • 2.txt
  • 1.txt
  • 4.txt
  • 3.txt

正しい順序の代わりに。

これが私のコードです：

var ChatList = new Array();
var p;
var DirectoryList = new Array();
var ChatString = '';

function loadChat(variable) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            DirectoryList = JSON.parse(req.responseText);
            var p = variable;
            while (p < DirectoryList.length) {
                loadLog(p);
                p++;
            }
        }
    }

    //END REQ1

    //Post Chat to DIV

    function loadLog(p) {
        $.get('chat/log/' + DirectoryList[p], function (data2) {
            ChatList.push(data2);
            $('#ChatContainer').append(data2);
        });
    }

    //End
    req.open('GET', 'process/ReadChatLogs.php', true)
    req.send(null);
}

loadChat(0);
4

1 に答える 1

7

Ajaxは、サーバーが1つのリクエストを返すのに次のリクエストよりも時間がかかる可能性があるため、リクエストしたのと同じ順序で終了することは保証されません。これを解決するには、すべてが完了するまで待ってから、元のコレクションをループして結果を追加します。以下は、遅延オブジェクトを使用してこれを行う方法です。

var ChatList = new Array();
var p;
var DirectoryList = new Array();
var ChatString = '';

function loadChat(variable) {
    var req = new XMLHttpRequest();
    req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
            DirectoryList = JSON.parse(req.responseText);
            var p = variable;
            var defArr = []; // store references to deferred objects
            while (p < DirectoryList.length) {
                defArr.push(loadLog(p));
                p++;
            }
            $.when.apply($,defArr).done(function(){ // apply handler when all are done
                // handle case where only one ajax request was sent
                var args = arguments;
                if ($.type(args[0]) != "array") {
                    args = [];
                    args[0] = arguments;
                }
                // loop over and ouput results.
                var outHTML = "";
                $.each(args,function(i){
                    outHTML += args[i][0];
                    ChatList.push(args[i][0]);
                });
                $("#ChatContainer").append(outHTML);
            });
        }
    }

    //END REQ1

    //Post Chat to DIV

    function loadLog(p) {
        return $.get('chat/log/' + DirectoryList[p]);
    }

    //End
    req.open('GET', 'process/ReadChatLogs.php', true)
    req.send(null);
}

編集：1つのajaxリクエストのみが送信されるケースを修正

于 2013-03-25T17:52:30.127 に答える