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

I'm working on a game that uses a lot of AJAX calls to update, save, edit save games, etc.

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

Thing is that it seems that subsequently started AJAX requests do not queue up like I want to.

事情似乎是随后启动的AJAX请求不会像我想的那样排队。

For example I'm checking server side if an action is allowed, so I need a current save game. The save game is sent before, but the check request executes before the save game request finished.

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

So I want it so be like this:

所以我想它就像这样:

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

Currently it's more like this:

目前它更像是这样的:

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

Even though timewise the AJAX calls are triggered in correct order. They just would need to wait until the previous triggered call finished.

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

Is there a way to achieve this globally? Because the thing is that most calls don't know about the other requests.

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

Can I get this done without setInterval calls to check if a requests finished?

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

UPDATE: Obviously, I didn't cleared out the actual problem. I know that this is because AJAX is async.

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

But I need those to stay in queue. Also at runtime I don't know about what calls are triggered at which time, because this is all user action dependend. So I can't call the check request after the save request, because I have no idea if the user triggered an action that need to call the check request.

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

So I need a global implementation, where ajax requests always wait for their execution until every request that pre existed has finished.

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

So I want those calls to be async (to not freeze the UI, etc) but "sync" in regards of their execution order.

所以我希望这些调用是异步的(不冻结UI等),而是“同步”它们的执行顺序。

4 个解决方案

#1

there is a very usefull jquery plugin ajaxQ that allows you to create a queue of ajax requests

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

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

In my opinion it is best to create an add-to-queue function for yourself, like so:

在我看来,最好为自己创建一个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
    }
});
}

Then you can call this with:

然后你可以用以下方法调用:

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

#2

If you are using jQuery's $.ajax() or $.post() or $.get(), use the call back to start the next one! Eg:

如果您使用的是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
    });
});

You can do the iteration, may be this way:

您可以进行迭代,可能是这样的:

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

#3

One way would be to use the callback of the first request to start the next.

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

A cleaner solution would be to set up an event in the callback and run the second request when the event is triggered.

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

In the first request callback

在第一个请求回调中

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

Attach event handler

附加事件处理程序

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

#4

Here you can find an interesting aspects async ajax calls. But I think you should consider jQuery .promise() for your scenario. It has the ability to wait and execute. You can find more details on docs.

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

Read this and jQuery ajax docs also. This blog contains a good example on how to use deferred promises.

阅读本文和jQuery ajax文档。这篇博客包含了一个关于如何使用延期承诺的好例子。

#1