javascript - How to force one AJAX request to wait to finish for another? - Stack Overflow

admin管理员组

文章数量:1406918

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.

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.

• javascript
• jquery
• ajax
• asynchronous

Share Improve this question Follow edited Aug 26, 2014 at 10:43 Johannes Klauß asked Aug 26, 2014 at 10:11 Johannes KlaußJohannes Klauß 11.1k1818 gold badges7171 silver badges127127 bronze badges 4

• 4 Yes. Set up the next request in the callback of the first. – Dave Newton Commented Aug 26, 2014 at 10:12
• it is because of the asynchronous nature of ajax request... – Arun P Johny Commented Aug 26, 2014 at 10:13
• 2 Use the promises returned from ajax calls. You can run any number in parallel or sequentially or in binations as required. Using callbacks will introduce dependencies in the code you may not want. – iCollect.it Ltd Commented Aug 26, 2014 at 10:14
• As the updated version and a ment 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ß Commented Aug 26, 2014 at 10:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

$.ajaxq ("MyQueue", {
    url: 'http://jsfiddle/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
    },
    plete: function (response) {
        //do stuff
    },
    success: function (response) {
        //do stuff
    }
});
}

Then you can call this with:

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

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

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

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.

本文标签： javascriptHow to force one AJAX request to wait to finish for anotherStack Overflow