title: Nested AJAX calls to be called in a particular order
body: <p>I've tried going through <a href="https://stackoverflow.com/questions/38468428/jquery-deferred-in-each-loop-with-ajax-callback">this question</a> and also <a href="https://stackoverflow.com/questions/13951456/using-deferred-with-nested-ajax-calls-in-a-loop/13951699#13951699">this</a>, but I can't seem to figure out how to make my requirements work.</p>
  
  <p>I want to call <a href="https://reqres.in/api/users" rel="nofollow noreferrer">https://reqres.in/api/users</a> a number of times over a loop. This AJAX call returns only the first page of dummy users. After I get the first page, I want to call the next pages. </p>
  
  <p>Here's my code :</p>
  
  <pre><code>$(document).ready(function() {
  
      function getMoreUsers() {
          var def = $.Deferred();
          var requests = [];
          for (var j=2; j&lt;=4; j++) {
              console.log("getting info for page # " + j);
              requests.push(
                  $.ajax("https://reqres.in/api/users?page=" + j).done(function() {
                      console.log("got info for page # " + j);
                      def.resolve();
                  })
              );
          }
          return def.promise();
      }   
  
      function getAllUsers() {
          var def = $.Deferred();
          var requests = [];
          for (var i=0; i&lt; 2; i++) {
              console.log("iteration # " + i);
              requests.push(
                  $.ajax("https://reqres.in/api/users").done(function(data) {
                      console.log("got first page info");
                      getMoreUsers();
                      def.resolve();
                  })
              );
          }
          return def.promise();
      }
  
      getAllUsers().done(function() {
          console.log("all completed");
      });
  });
  </code></pre>
  
  <p>The output that I get is this :</p>
  
  <pre><code>iteration # 0 
  iteration # 1 
  got first page info 
  getting info for page # 2 
  getting info for page # 3 
  getting info for page # 4 
  all completed 
  got first page info 
  getting info for page # 2 
  getting info for page # 3 
  getting info for page # 4 
  got info for page # 5
  </code></pre>
  
  <p>However, I want this :</p>
  
  <pre><code>iteration # 0
  got first page info
  getting info for page # 2
  got info for page # 2
  getting info for page # 3
  got info for page # 3
  getting info for page # 4
  got info for page # 4
  iteration # 1
  got first page info
  getting info for page # 2
  got info for page # 2
  getting info for page # 3
  got info for page # 3
  getting info for page # 4
  got info for page # 4
  all completed
  </code></pre>
  
  <p>I don't even understand how <code>page # 5</code> came in the output when I'm looping till 4, and it came 6 times, like below :</p>
  
  <p><a href="https://i.stack.imgur.com/f3gDr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f3gDr.png" alt="enter image description here"></a></p>