Question

我正在开发一款使用大量AJAX调用来更新，保存，编辑保存游戏等的游戏。

事情似乎是后来启动的AJAX请求似乎没有像我想的那样排队。

例如，如果允许某个操作，我会检查服务器端，所以我需要一个当前的保存游戏。保存游戏之前已发送，但检查请求在保存游戏请求完成之前执行。

所以我想要它就像这样：

AJAX start: Save Game
AJAX finish: Save Game
AJAX start: Check
AJAX finish: Check
AJAX start: Save Game
AJAX finish: Save Game

目前它更像是这样：

AJAX start: Save Game
AJAX start: Check
AJAX finish: Save Game
AJAX start: Save Game
AJAX finish: Check
AJAX finish: Save Game

即使按时间顺序触发AJAX调用。他们只需要等到上一次触发的呼叫结束。

有没有办法在全球范围内实现这一目标？因为大多数电话都不知道其他请求。

我可以在没有setInterval调用的情况下完成此操作，以检查请求是否已完成？

更新：显然，我没有清除实际问题。我知道这是因为AJAX是异步的。

但我需要那些留在队列中。同样在运行时，我不知道在哪个时间触发了什么呼叫，因为这是所有用户操作的依赖。因此，我无法在check请求后调用save请求，因为我不知道用户是否触发了需要调用check请求的操作。

所以我需要一个全局实现，其中ajax请求总是等待它们执行，直到预先存在的每个请求都完成。

所以我希望这些调用是异步的（不冻结UI等）但是＆＃34;同步＆＃34;关于他们的执行令。

Answer 1

有一个非常有用的jquery插件ajaxQ，允许你创建一个ajax请求队列

$.ajaxq ("MyQueue", {
    url: 'http://jsfiddle.net/echo/jsonp/',
    type: 'post',
    dataType: "jsonp"
});

在我看来，最好为自己创建一个add-to-queue功能，如下所示：

function AddRequest(name, url, postData) {
var jqXHR = $.ajaxq(name, {
    url: url,
    type: 'POST',
    contentType: "application/x-www-form-urlencoded",
    data: postData,
    beforeSend: function () {
        //do stuff
    },
    error: function (response) {
        //do stuff
    },
    complete: function (response) {
        //do stuff
    },
    success: function (response) {
        //do stuff
    }
});
}

然后你可以用：

来调用它

var myurl = "http://www.example.com/myaction";
var postData = "myparam1=one&myparam2=two";
AddRequest('myAjaxQueue', myurl, postData);

Answer 2

如果您使用的是jQuery的$.ajax()或$.post()或$.get()，请使用回拨启动下一个！例如：

console.log("AJAX start: Save Game");
$.post("save-game.php", function(){
    console.log("AJAX finish: Save Game");
    console.log("AJAX start: Check");
    $.post("check.php", function(){
        console.log("AJAX finish: Check");
        // Iterate from here using a recursive function! :P
    });
});

你可以这样做迭代：

function saveCheckGame()
{
    console.log("AJAX start: Save Game");
    $.post("save-game.php", function(){
        console.log("AJAX finish: Save Game");
        console.log("AJAX start: Check");
        $.post("check.php", function(){
            console.log("AJAX finish: Check");
            saveCheckGame();
        });
    });
}

Answer 3

一种方法是使用第一个请求的回调来启动下一个请求。

更清洁的解决方案是在回调中设置一个事件，并在触发事件时运行第二个请求。

在第一个请求回调中

$( document ).trigger( "request1Finished" );

附加事件处理程序

$( document ).on( "request1Finished", function() {
    // run next request
});

Answer 4

Here你可以找到一个有趣的方面async ajax调用。但我认为您应该考虑jQuery .promise()用于您的方案。它具有等待和执行的能力。您可以在docs找到更多详细信息。

同时阅读this和jQuery ajax docs。此博客包含how to use延期承诺的好例子。

如何强制一个AJAX请求等待完成另一个？

4 个答案: