AJAX以错误的顺序回归

Question

好的,所以我正在为我正在研究的项目写一个小聊天系统.我一直试图在这个过程中学习AJAX,而且一切似乎都很顺利.我的AJAX运行一个打开目录的PHP页面,AJAX从页面接收目录作为Array(DirectoryList).然后反复加载另一个AJAX函数,直到所有聊天日志都附加到DIV.

我的问题是ChatLogs没有按正确的顺序加载.

例如,如果我有日志:

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

它们将附加到ChatContainer DIV中:

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

Answer 1

Ajax不能保证以您请求的顺序完成,因为服务器返回一个请求可能比下一个请求花费的时间更长.要解决这个问题,请等待它们全部完成,然后遍历原始集合并附加结果.下面是如何使用延迟对象执行此操作.

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

编辑:固定大小写,其中只发送一个ajax请求