title: Javascript pause problem in a loop, ajax, jquery
body: <p>I'm trying to create a simple animation. Long story short, I've got a list of 20 small divs and one outside div. I want to display five small divs within a large div at the time. Ideally, I would get a set of next 5 divs every 5 seconds. <br>
  I'm using jquery ajax function to create small divs, here's the code:</p>
  
  <pre><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&lt;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('&lt;br/&gt;min: '+minimum+' max: '+maximum); //prints current group of divs (0-5; 5-10 etc)
              $("#gadgetMain div").slice(minimum,maximum).removeClass('hidden');  
              }
  </code></pre>
  
  <p>});</p>
  
  <p>So, the problem is that I can't get it to wait 5 seconds to display a group of divs I'm interested in. I know that it divides divs correctly - when I alert the minimum and maximum value, it changes the content of the outer div everytime I close the alert. 
  But I can't find a way of pausing the function.</p>
  
  <p>I would be very grateful for some help, it's driving me mad</p>