How to force one AJAX request to wait to finish for another?

Question

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

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

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.

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?

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

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.

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

Answer 1

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

$.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:

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

Answer 2

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.

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

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

Answer 4

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

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