Javascript pause problème dans une boucle, ajax, jquery

Question

J'essaie de créer une animation simple. Longue histoire courte, j'ai une liste de 20 petits divs et un div extérieur. Je veux afficher cinq petites divs dans un grand div à la fois. Idéalement, j'obtiendrais une série de 5 divs toutes les 5 secondes.
J'utilise la fonction ajax jquery pour créer de petites divs, voici le code:

$(document).ready(function(){ 
     var amount=0; 
     $.ajax({ 
      type: "GET", 
      url: "SampleServiceIncidentList.xml", 
      dataType: "xml", 
      success: function(xml){ 

          //creates divs within GadgetMain div, works fine. 

             }); 
          amount = $("#gadgetMain").children().size(); //counts how many small divs there are 
          $("#testText").append("amount of children:"+amount); //and displays it in a test field 
          divideFeed(); 
      }//close success 
     }); //close $.ajax(


     function divideFeed(){ //divides the set of small divs into groups 
      var limit = 5; 
      var pagesNo = Math.ceil((amount/limit)); 
      var minimum=0; 
      var maximum; 
      var i=0; 
      while (i<pagesNo) 
      {    
       minimum= i*limit; 
       maximum=minimum+limit;     


       // 
       // PROBLEM HERE 
       // 
       populate(minimum, maximum); 

       i++; 
      }     
     } 

     function populate(minimum, maximum){ 
      $("#gadgetMain div").addClass('hidden'); //hides all small divs 
      $("#testText").append('<br/>min: '+minimum+' max: '+maximum); //prints current group of divs (0-5; 5-10 etc) 
      $("#gadgetMain div").slice(minimum,maximum).removeClass('hidden'); 
      } 

}); Donc, le problème est que je n'arrive pas à attendre 5 secondes pour afficher un groupe de divs qui m'intéresse. Je sais qu'il divise correctement les divs - quand j'alerte la valeur minimum et maximum, il change le contenu de la div externe chaque fois que je ferme l'alerte. Mais je ne trouve pas un moyen de mettre la fonction en pause.

Je serais très reconnaissant de l'aide, il me rend fou

Answer 1

Vous ne voulez pas mettre en pause la fonction; au lieu de cela, vous voulez remettre le contrôle au navigateur et le faire vous rappeler après un intervalle. La fonction window.setTimeout le fait. (Il y a aussi le lié window.setInterval, mais je préfère habituellement setTimeout.)

Il faut un peu d'inversion logique mentale, mais il est très envie de faire un appel Ajax - vous demander quelque chose, puis laisser aller et que l'appel du navigateur vous revenez quand vous l'obtenez.

Ainsi, par exemple:

function doSomething(x) { 

    runner(); 

    function runner() { 
     console.log("x = " + x); 
     --x; 
     if (x > 0) { 
      window.setTimeout(runner, 1000); 
     } 
    } 
} 

doSomething(10); 

... compte à rebours de 10, une fois par seconde. doSomething revient presque immédiatement, mais runner est rappelé une fois par seconde jusqu'à ce qu'il arrête de se replier lui-même.