title: While loop with jQuery async AJAX calls
body: <p>The thing:
  I have a page, which has to display undetermined number of images, loaded through AJAX (using base64 encoding on the server-side) one by one.</p>
  
  <pre><code>var position = 'front';
  while(GLOB_PROCEED_FETCH)
  {
      getImageRequest(position);
  }
  
  function getImageRequest(position)
  {
      GLOB_IMG_CURR++;
  $.ajax({
          url: urlAJAX + 'scan=' + position,
          method: 'GET',
          async: false,
          success: function(data) {
              if ((data.status == 'empty') || (GLOB_IMG_CURR &gt; GLOB_IMG_MAX))
              {
                  GLOB_PROCEED_FETCH = false;
                  return true;
              }
              else if (data.status == 'success')
              {
                  renderImageData(data);
              }
          }
      });
  }
  </code></pre>
  
  <p>The problem is that images (constructed with the renderImageData() function) are appended (all together) to the certain DIV only when all images are fetched. I mean, there is no any DOM manipulation possible until the loop is over.</p>
  
  <p>I need to load and display images one by one because of possible huge number of images, so I can't stack them until they all will be fetched.</p>