title: Sending one AJAX request at a time from a loop
body: <p>I know this question has been asked countless times, but I cant figure out for the life of me how to make this answer work in my case: <a href="https://stackoverflow.com/questions/3051215/wait-for-async-javascript-function-to-return">wait for async javascript function to return</a></p>
  
  <p>I'm looping through some "tv channels" in the outerloop and then looping through dates in the week in the innerloop. In the inner loop I make a ajax request to a server to fetch the data and I then store/cache it for later use like so</p>
  
  <pre><code>var dates = []; //&lt;-- Contains a list of dates for the coming week 
  var baseUrl = "http://www.someserver.com";
  var storedChannels = [1,2,3,4,5,6,7,8,9,10,45,23,56,34,23,67,23,567,234,67,345,465,67,34];
  
  for(ch = 0; ch &lt; storedChannels.length; ch++) {   
      var channel = storedChannels[ch];
      for(d=0; d &lt; 7; d++) {
          var currentDate = dates[d];
          ajax({    
              url: baseUrl+"?ch="+channel+"&amp;dt=currentDate"+,
              complete: function(res) {
                  CMLocalStore.setString('ch' + ch + "_" + scheduleDay, res);
              },
          });
          //Want to wait here till the ajax request completes.
          //Do not want to continue to next iteration.
          //Do not want to fire of 50 bazillion ajax requests all at once
          //Why? Very limited bandwidth scenario, plenty of channels  
      }
  }
  </code></pre>
  
  <p>PS: NO JQuery please! Plain JS solutions only</p>
  
  <p>Many thanks!</p>