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.

Use the `promises` returned from ajax calls. You can run any number in parallel or sequentially or in combinations as required. *Using callbacks will introduce dependencies in the code you may not want.* — iCollect.it Ltd, Aug 26 '14 at 10:14
As the updated version and a comment below Praveen Kumars answer suggests: I basically want a request to check, if there are currently requests running. If not, the request is triggered, if yes, the request should wait until all other are finished. — Johannes Klauß, Aug 26 '14 at 10:40

score 3 · Accepted Answer · answered Aug 26 '14 at 10:44

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

this gave me a hard time a few months ago and this solution solved it for me, glad I could help! — Daniël Tulp, Aug 26 '14 at 14:46

score 0 · Answer 2 · answered Aug 26 '14 at 10:16

0

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

answered Aug 26 '14 at 10:16

Praveen Kumar Purushothaman

164,888
24
203
252

I can't do this because the calls are triggered by user interactions. This can be many many different places. So these calls must remain independent. – Johannes Klauß Aug 26 '14 at 10:32
@JohannesKlauß So, can you use the `$.ajaxComplete` method to check if the AJAX call is completed and then move on with the next one? – Praveen Kumar Purushothaman Aug 26 '14 at 10:33
Not really, because I don't know if there is a next one. I basically want a request to check, if there are currently requests running. If not, the request is triggered, if yes, the request should wait until all other are finished. – Johannes Klauß Aug 26 '14 at 10:38
Ah! Grr... I give up. I need to think of a way to do this! :) – Praveen Kumar Purushothaman Aug 26 '14 at 10:39

score 0 · Answer 3 · answered Aug 26 '14 at 10:21

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

score 0 · Answer 4 · edited May 23 '17 at 10:28

0

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.

edited May 23 '17 at 10:28

Community

1
1

answered Aug 26 '14 at 10:23

Maleen Abewardana

13,600
4
36
39

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

4 Answers4