How do I make one AJAX request wait for another to finish?
I am working on a game that uses many AJAX calls to update, save, edit saved games, etc.
The thing is, it seems that the subsequently started AJAX requests are not being queued as I want.
For example, I am checking the server side if the action is allowed, so I need the current game. The save game is submitted early, but the verification request is made before the save is complete.
So, I want it to 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 looks 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
Although the timing of the AJAX call is fired in the correct order. They just need to wait for the previous call to end.
Is there a way to achieve this globally? Because the point is that most of the calls are unaware of other queries.
Can I do this without calls setInterval
to check if the requests have completed?
UPDATE: Obviously I haven't figured out the actual problem. I know this has to do with AJAX being asynchronous.
But I need them to stay in line. Also at runtime I don't know what calls are being fired at this time, because it all depends on the user. So I cannot call the request check
after the request save
, because I have no idea if the user has invoked an action that requires the request to be called check
.
So, what I need is a global implementation where ajax requests always wait until each requested request has finished executing.
So I want these calls to be asynchronous (so as not to freeze the UI, etc.), but "synchronized" in terms of their order of execution.
source to share
there is a very useful jquery ajaxQ plugin 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, the best thing to do is create a queue function for yourself:
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);
source to share
If you are using jQuery $.ajax()
or $.post()
or $.get()
, use a callback to start the next one! For example:
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 iterate, it could be like this:
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();
});
});
}
source to share
One way is to use the callback of the first request to start the next one.
A cleaner solution would be to set up an event in the callback and fire a second request when the event fires.
In the first callback of the request
$( document ).trigger( "request1Finished" );
Attach an event handler
$( document ).on( "request1Finished", function() {
// run next request
});
source to share
Here you can find interesting aspects of asynchronous calls async. But I think you should consider jQuery .promise()
for your scenario. He has the ability to wait and execute. You can find more details on the docs .
Read this and the jQuery ajax docs also.This blog has a good example of how to use deferred promises.
source to share