Alerte avant requête Ajax en boucle avec JQuery

J'essaie d'avoir une boucle qui demande à l'utilisateur une confirmation avant de faire une requête ajax synchrone et elle ne fonctionne pas dans l'ordre. C'est mon code:

<script> $(document ).ready(function() { for(var i = 0; i < 3; i++) { alert("iteration "+i); $(".demo").easyOverlay("start"); $.ajax({ async: false, url: "http://rest-service.guides.spring.io/greeting" }).then(function(data) { $('.demo').append(data.id); $('.demo').append(data.content); $(".demo").easyOverlay("stop"); }); } }); </script> 

Le comportement que j'ai avec mon code est comme ceci:

  • Demandez la première confirmation.
  • Demandez la deuxième confirmation.
  • Demandez la troisième confirmation.
  • Exécuté les trois appels ajax l'un après l'autre.

Il semble que, pour une raison quelconque, tous les appels ajax soient retardés jusqu'à ce que les alertes soient toutes confirmées et je ne sais pas pourquoi. J'ai essayé d'atteindre mon même objectif sans utiliser de boucle et en répétant le code 3 fois et j'ai le même comportement étrange.

Modifier:

Si je place la ligne suivante dans 'then ()' pour vérifier si le html est effectivement modifié, je peux voir dans la console que les choses arrivent réellement dans l'ordre et qu'elles ne s'affichent plus dans le navigateur que si je confirme toutes les alertes et c'est Ce qui donne l'impression que l'ordre d'exécution n'est pas correct. Je dois donc comprendre pourquoi le fait de refléter les modifications apportées au html est retardé et ne se fait pas immédiatement.

 console.log($('.demo').html()); 

L'objet IMO jQuery.Deferred() sera le moyen le plus prometteur.

  • L'objet différé, est un objet chainable utility créé en appelant la méthode jQuery.Deferred (). Il peut enregistrer plusieurs rappels dans des files d'attente de rappel, invoquer des files d'attente de rappel et relayer l'état de réussite ou d'échec de toute fonction synchrone ou asynchrone.

  • deferred objects peuvent être utilisés pour traiter des événements asynchrones – vous lancez une action, puis enregistrez un rappel qui sera invoqué lorsque l'action aura été complétée. Cela inclut AJAX, bien qu'il existe de nombreuses autres utilisations.

Où demander de résoudre

 function callAjaxMethod(url, step) { return $.Deferred(function() { //Confirm box for use inputs if(confirm(step)) { //Ajax call $.ajax(url).done(function(data){ //Do something //Update your HTML if needed }); } setTimeout(function() { //This will resolve your call again this.resolve(); }.bind(this), 1000); }) } 

Objet différé

 var defer = $.Deferred().resolve(); var counters = [1, 2, 3, 4, 5]; $.each(counters, function(key, value) { defer = defer.then(function() { return callAjaxMethod('URL', value); }); }); 

Il appellera quand tout est terminé

 defer.then(function() { //It will call when all done }); 

Peu de documentation

Officiel jQuery.Deferred

Appelez ajax via jQuery a reporté

Article sur plusieurs promesses jQuery

J'espère que cela vous aidera 🙂

 var $demo = $('#demo'); var ajaxURL = 'https://jsonplaceholder.typicode.com/posts'; function callAjaxMethod(url, step) { return $.Deferred(function() { //Confirm box for user inputs if(confirm(step)) { //Ajax call $.ajax(url).done(function(data){ //Do something //console.log(data); //Update the HTML OK $demo.append(step + ": Success" + "<br/>"); }); } else { //Update the HTML when cancel $demo.append("<font color='red'>"+ step +": Cancelled </font>" + "<br/>"); } //Use timeout to get the resolved setTimeout(function() { this.resolve(); }.bind(this), 1000); }) } //Defer object var defer = $.Deferred().resolve(); var counters = ['call 1', 'call 2', 'call 3', 'call 4', 'call 5']; //Loop your calls $.each(counters, function(key, value) { defer = defer.then(function() { return callAjaxMethod(ajaxURL, value); }); }); defer.then(function() { //It will call when all done $(demo).append("<br/><br/>"+"ALL DONE"); }); 
 div { color: blue; font-size: 14px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="demo"></div> 

C'est parce que vous devriez faire la boucle dans le rappel de demande Ajax. Lorsque vous le faites de cette façon, tout le code est exécuté de manière synchronique, alors que si vous le faites lorsque le rappel de la demande Ajax est invoqué, les demandes et les alertes seraient exécutées comme vous l'attendiez.

Edit: Voici un exemple: (générique, vous pouvez le personnaliser selon vos besoins)

 do(3) function do(i) { if (i === 0) return $.ajax({...}).then(function() { alert(...) do(i-1) }) } 

Chaque fois que l'appel d'ajax lance, demandez d'abord la confirmation. Si vous autorisez alors seulement ajax appelez le feu et appelez le prochain appel ajax et demandez la confirmation et ainsi de suite … Veuillez vérifier l'extrait ci-dessous pour plus de compréhension.

 //call first time doAjax(1,3) //Function to call ajax repeatedly function doAjax(arrCount,maxCount) { if (confirm("iteration "+arrCount)) { $.ajax({ url: 'myUrl', type: "POST", data: { // data stuff here }, success: function (data) { arrCount++; //Next ajax call when current ajax call has been finished. if(arrCount<=maxCount){ doAjax(arrCount,maxCount); } } }); } }