2

好的，所以我正在为我正在从事的项目编写一个小聊天系统。在此过程中，我一直在尝试学习 AJAX，而且一切似乎都很顺利。我的 AJAX 运行一个打开目录的 PHP 页面，并且 AJAX 从页面接收作为数组 (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);
4

1 回答 1

7

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 请求的情况

于 2013-03-25T17:52:30.127 回答