title: javascript for each loop wait until process completes ajax
body: <pre><code>for (var i = 0; i &lt; theTagNames.length; i++) {
      var url = baseURL + "?" +
          "jsoncallback=?" +
          "&amp;method=flickr.photosets.getPhotos" +
          "&amp;format=json" +
          "&amp;api_key=" + api +
          "&amp;photoset_id=" + theTagNames[i].id;
      tagID = theTagNames[i].id;
      console.log('for: ' + i)
  
      $.getJSON(url, {}, function (data) {
          tmpSetName = theTagNames[tmpi].title._content;
          category = theTagNames[tmpi].description._content;
          tmpi += 1;
          keepTrack = 0;
  
          $.each(data.photoset.photo, function (z, item) {
              if (i == limit) return false;
              console.log('each: ' + z)
  
              var thumbURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_s.jpg';
              var largeURL = thumbURL.replace('_s.jpg', '_b.jpg');
  
              keepTrack = z
  
              if (keepTrack == 0) {
                  $('#flickrImages').append('&lt;div style="float: left;background-color: #102C53; color: #fff; width: 690px; text-align:left; font-weight: bold; padding: 3px;" id="title' + tmpSetName + '"&gt;' + tmpSetName +
                      '&lt;span id="span' + tmpSetName.replace(/ /g, '_') + '" style="cursor: pointer; float: right;" onclick="clickedTitle(this);"&gt;' +
                      ' [Start Slideshow]' +
                      '&lt;/span&gt;' +
                      '&lt;/div&gt;');
              }
  
              if (keepTrack &lt;= (displayLimit - 1)) {
                  $('#flickrImages').append('&lt;span align="left" style="float: left;" id="imgDiv"&gt;' +
                      '&lt;a style="outline: none;" rel="' + tmpSetName.replace(/ /g, '_') + '" title="" href="' + largeURL + '" id="imgLink' + tmpSetName.replace(/ /g, '_') + i + '"&gt;' +
                      '&lt;img id="img' + i + '" src="' + thumbURL + '" style="border: 1px solid #102C53; margin: 3px;" alt="' + tmpSetName + '" /&gt;' +
                      '&lt;/a&gt;' +
                      '&lt;/span&gt;');
              } else if (keepTrack == (displayLimit + 1)) {
                  showMoreImages = true;
              } else {
                  $('#flickrImages').append('&lt;span align="left" style="float: left; display: none; visibility: hidden;" id="hidden' + tmpSetName.replace(/ /g, '_') + '"&gt;' +
                      '&lt;a style="outline: none;" rel="' + tmpSetName.replace(/ /g, '_') + '" title="" href="' + largeURL + '" id="imgLink' + tmpSetName.replace(/ /g, '_') + i + '"&gt;' +
                      '&lt;img id="img' + i + '" src="' + thumbURL + '" style="border: 1px solid #102C53; margin: 3px;" alt="' + tmpSetName + '" /&gt;' +
                      '&lt;/a&gt;' +
                      '&lt;/span&gt;');
              }
          });
      });
  }
  }
  </code></pre>
  
  <p>Currenlty the above code works but when i refresh the page it tends to get the images out of order (wrong heading with the images &amp; also wrong images that go with that heading). It seems to be getting ahead of itself since the <strong>$.each</strong> could have over 50+ images to get <em>per <strong>theTagName</em></strong>.</p>
  
  <p>Sometimes its in the correct order but often times it is not.</p>
  
  <p>Is it possible to pause the <strong>for (var i = 0; i &lt; theTagNames.length; i++) {</strong> until all images in the <strong>$.each</strong> have been found and appened to the <strong>flickrImages</strong> div?</p>