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请求

AJAX以错误的顺序回归

1 个答案: