Attendez jusqu'à ce que tous jQuery Ajax demande?

Si vous voulez attendre jusqu'à ce que toutes les requêtes ajax sont finis dans votre document, n'importe comment beaucoup d'entre eux existent, il suffit d'utiliser $.ajaxStop événement de cette façon:

  $(document).ajaxStop(function () {
      //0 === $.active
  });

Dans ce cas, il n'y a pas besoin de deviner combien de demandes peut être dans une application qui pourrait finir dans l'avenir. Dans certains cas, les requêtes ajax peut être une partie de la fonction de la logique interne, qui peut être assez compliqué (par exemple, l'appel à d'autres fonctions), et dans ce cas, vous pourriez ne pas attendre jusqu'à ce que ladite fonction est effectuée avec l'ensemble de sa logique, plutôt que de seulement d'attente pour le ajax partie à compléter.

$.ajaxStop ici peut également être lié à tout HTML nœud que vous pensez peut-être modifié par ajax.

De nouveau le but de ce gestionnaire est de savoir quand il n'y a pas de active ajax de ne pas effacer ou réinitialiser quelque chose.

P. S. Si vous n'avez pas l'esprit à l'aide de ES6 syntaxe, alors vous pouvez utiliser Promise.all connu ajax méthodes. Exemple:

Promise.all([ajax1(), ajax2()]).then(() => {
 //all requests finished successfully
}).catch(() => {
 //all requests finished but one or more failed
})

Un point intéressant ici est qu'il fonctionne à la fois avec Promises et $.ajax demandes. Voici jsFiddle démontrant la dernière.

Utiliser le ajaxStop événement.

Par exemple, disons que vous avez un de chargement ... message lors de l'extraction de 100 requêtes ajax et que vous voulez cacher ce message une fois chargé.

De l'jQuery doc:

$("#loading").ajaxStop(function() {
  $(this).hide();
});

Notez aussi qu'il va attendre que toutes les requêtes ajax être effectué sur cette page.

javascript est basé sur des événements, de sorte que vous ne devriez jamais attendre, plutôt crochets fixés/rappels

Vous pouvez probablement utiliser simplement le succès/complète les méthodes de jquery.ajax

Ou vous pouvez utiliser .ajaxComplete :

$('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxComplete handler.');
    //and you can do whatever other processing here, including calling another function...
  }
});

si youy devrait afficher une pseudo-code de la façon dont votre(s) requête ajax(s) est(sont) appelés à être plus précis...

Comme d'autres réponses mentionné que vous pouvez utiliser ajaxStop() attendre jusqu'à ce que toutes les requêtes ajax sont terminés.

$(document).ajaxStop(function() {
     //This function will be triggered every time any ajax request is requested and completed
});

Si vous voulez le faire pour un spécifique ajax() demande le meilleur que vous pouvez faire est d'utiliser complete() méthode à l'intérieur de la certaine requête ajax:

$.ajax({
    type: "POST",
    url: "someUrl",
    success: function(data) {
        //This function will be triggered when ajax returns a 200 status code (success)
    },
    complete: function() {
        //This function will be triggered always, when ajax request is completed, even it fails/returns other status code
    },
    error: function() {
        //This will be triggered when ajax request fail.
    }
});

Mais, Si vous avez besoin d'attendre pour peu de et certains requête ajax à faire? Utiliser le merveilleux javascript promesses attendre jusqu'à ce que la ces ajax vous voulez attendre de faire. J'ai fait un peu de temps, facile et lisible exemple pour vous montrer comment ne promet fonctionne avec ajax.
Veuillez jeter un oeil à l'exemple suivant, sa en vaut la peine. J'ai utilisé setTimeout afin de clarifier l'exemple.

JS:

//Note:
//resolve() is used to mark the promise as resolved
//reject() is used to mark the promise as rejected
$(document).ready(function() {
$("button").on("click", function() {
var ajax1 = new Promise((resolve, reject) => {
$.ajax({
type: "GET",
url: "https://miro.medium.com/max/1200/0*UEtwA2ask7vQYW06.png",
xhrFields: { responseType: 'blob'},
success: function(data) {
setTimeout(function() {
$('#image1').attr("src", window.URL.createObjectURL(data));
resolve(" Promise ajax1 resolved");
}, 1000);
},
error: function() {
reject(" Promise ajax1 rejected");
},
});
});
var ajax2 = new Promise((resolve, reject) => {
$.ajax({
type: "GET",
url: "https://cdn1.iconfinder.com/data/icons/social-media-vol-1-1/24/_github-512.png",
xhrFields: { responseType: 'blob' },
success: function(data) {
setTimeout(function() {
$('#image2').attr("src", window.URL.createObjectURL(data));
resolve(" Promise ajax2 resolved");
}, 1500);
},
error: function() {
reject(" Promise ajax2 rejected");
},
});
});
var ajax3 = new Promise((resolve, reject) => {
$.ajax({
type: "GET",
url: "https://miro.medium.com/max/632/1*LUfpOf7teWvPdIPTBmYciA.png",
xhrFields: { responseType: 'blob' },
success: function(data) {
setTimeout(function() {
$('#image3').attr("src", window.URL.createObjectURL(data));
resolve(" Promise ajax3 resolved");
}, 2000);
},
error: function() {
reject(" Promise ajax3 rejected");
},
});
});
Promise.all([ajax1, ajax2, ajax3]).then(values => {
console.log("We waited until ajax ended: " + values);
console.log("My few ajax ended, lets do some things!!")
}, reason => {
console.log("Promises failed: " + reason);
});
//Or if you want wait for them individually do it like this
//ajax1.then(values => {
//   console.log("Promise 1 resolved: " + values)
//}, reason => {
//    console.log("Promise 1 failed: " + reason)
//});
});
});

CSS:

img {
max-width: 200px;
max-height: 100px;
}

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Make AJAX request</button>
<div id="newContent">
<img id="image1" src="">
<img id="image2" src="">
<img id="image3" src="">
</div>

Si vous avez besoin de quelque chose de simple; une fois et fait de rappel

        //multiple ajax calls above
var callback = function () {
if ($.active !== 0) {
setTimeout(callback, '500');
return;
}
//whatever you need to do here
//...
};
callback();

Sur la base de @BBonifield réponse, j'ai écrit une fonction d'utilité, de sorte que le sémaphore de la logique n'est pas répandue dans tous les appels ajax.

untilAjax est la fonction d'utilité qui appelle une fonction de rappel lorsque tous les ajaxCalls sont terminés.

ajaxObjs est un tableau de l'ajax réglage objets [http://api.jquery.com/jQuery.ajax/].

fn est fonction de rappel

function untilAjax(ajaxObjs, fn) {
if (!ajaxObjs || !fn) {
return;
}
var ajaxCount = ajaxObjs.length,
succ = null;
for (var i = 0; i < ajaxObjs.length; i++) { //append logic to invoke callback function once all the ajax calls are completed, in success handler.
succ = ajaxObjs[i]['success'];
ajaxObjs[i]['success'] = function(data) { //modified success handler
if (succ) {
succ(data);
}
ajaxCount--;
if (ajaxCount == 0) {
fn(); //modify statement suitably if you want 'this' keyword to refer to another object
}
};
$.ajax(ajaxObjs[i]); //make ajax call
succ = null;
};

Exemple: doSomething fonction utilise untilAjax.

function doSomething() {
//variable declarations
untilAjax([{
url: 'url2',
dataType: 'json',
success: function(data) {
//do something with success data
}
}, {
url: 'url1',
dataType: 'json',
success: function(data) {
//do something with success data
}
}, {
url: 'url2',
dataType: 'json',
success: function(response) {
//do something with success data
}
}], function() {
//logic after all the calls are completed.
});
}

$.when ne fonctionne pas pour moi, callback(x) au lieu de return x a travaillé comme décrit ici: https://stackoverflow.com/a/13455253/10357604

De développer Alex réponse, j'ai un exemple avec une variable d'arguments et de promesses. J'ai voulu charger des images via ajax et de les afficher sur la page après ils sont tous chargés.

Pour ce faire, j'ai utilisé les éléments suivants:

let urlCreator = window.URL || window.webkitURL;
//Helper function for making ajax requests
let fetch = function(url) {
return $.ajax({
type: "get",
xhrFields: {
responseType: "blob"
},
url: url,
});
};
//Map the array of urls to an array of ajax requests
let urls = ["https://placekitten.com/200/250", "https://placekitten.com/300/250"];
let files = urls.map(url => fetch(url));
//Use the spread operator to wait for all requests
$.when(...files).then(function() {
//If we have multiple urls, then loop through
if(urls.length > 1) {
//Create image urls and tags for each result
Array.from(arguments).forEach(data => {
let imageUrl = urlCreator.createObjectURL(data[0]);
let img = `<img src=${imageUrl}>`;
$("#image_container").append(img);
});
}
else {
//Create image source and tag for result
let imageUrl = urlCreator.createObjectURL(arguments[0]);
let img = `<img src=${imageUrl}>`;
$("#image_container").append(img);
}
});

Mis à jour à travailler pour un seul ou de plusieurs url: https://jsfiddle.net/euypj5w9/

J'ai trouvé de façon simple, à l'aide de shift()

function waitReq(id)
{
jQuery.ajax(
{
type: 'POST',
url: ajaxurl,
data:
{
"page": id
},
success: function(resp)
{
...........
//check array length if not "0" continue to use next array value
if(ids.length)
{
waitReq(ids.shift()); //2
)
},
error: function(resp)
{
....................
if(ids.length)
{
waitReq(ids.shift());
)
}
});
}
var ids = [1, 2, 3, 4, 5];    
//shift() = delete first array value (then print)
waitReq(ids.shift()); //print 1

Regarde ma solution:

1.Insérer cette fonction (et variable) dans votre fichier javascript:

var runFunctionQueue_callback;
function runFunctionQueue(f, index, callback) {
var next_index = index + 1
if (callback !== undefined) runFunctionQueue_callback = callback;
if (f[next_index] !== undefined) {
console.log(index + ' Next function avalaible -> ' + next_index);
$.ajax({
type: 'GET',
url: f[index].file,
data: (f[index].data),
complete: function() {
runFunctionQueue(f, next_index);
}
});
} else {
console.log(index + ' Last function');
$.ajax({
type: 'GET',
url: f[index].file,
data: (f[index].data),
async: false,
complete: runFunctionQueue_callback
});
}
}

2.Buil un tableau avec vos demandes, comme ceci:

var f = [
{file: 'file_path', data: {action: 'action', data: 'any_data}},
{file: 'file_path', data: {action: 'action', data: 'any_data}},
{file: 'file_path', data: {action: 'action', data: 'any_data}},
{file: 'file_path', data: {action: 'action', data: 'any_data}}
];

3.Créer fonction de rappel:

function Function_callback() {
alert('done');
}

4.Appelez le runFunctionQueue fonction avec des paramètres:

runFunctionQueue(f, 0, QuestionInsert_callback);
//first parameter: array with requests data
//second parameter: start from first request
//third parameter: the callback function

Essayer de cette façon. faire une boucle à l'intérieur de java script la fonction d'attendre jusqu'à ce que l'appel ajax fini.

function getLabelById(id)
{
var label = '';
var done = false;
$.ajax({
cache: false,
url: "YourMvcActionUrl",
type: "GET",
dataType: "json",
async: false,
error: function (result) {
label='undefined';
done = true;
},
success: function (result) {
label = result.Message;
done = true;
}
});
//A loop to check done if ajax call is done.
while (!done)
{
setTimeout(function(){ },500); //take a sleep.
}
return label;
}