title: Jquery when.apply().done waits for one ajax call, but not another?
body: <p>I have a .each function where each "each" amkes an ajax call. I need to wait for them all to finish before continuing to make yet another ajax call. I'm using the solution found <a href="https://stackoverflow.com/questions/9044468/wait-for-each-to-finish-given-each-has-ajax-calls">here</a>. The crazy thing is, Once I changed the url of the Ajax call in the end function, it stopped working; the function doesn't wait for all the ajax calls to finish.</p>
  
  <pre><code>var iarr=[];
  
  $.getJSON("http://dbpedia.org/sparql?default-graph-uri=blablbla-get several-links", {},
  
  function (data) { //links returned through json
  var def = [];
  $.each(data.results.bindings, function () {
      var tlink = this.link.value;
      def.push(getmeta(tlink)); //get the meta values for each link
  });
  $.when.apply($, def).done(postmetas());
  });
  </code></pre>
  
  <p>The getmeta function looks like this:</p>
  
  <pre><code>function getmeta(lnk){
  var dfd=$.Deferred();
  $.ajax({
         url: "meta.php",
         type: "POST",
         data: {url: lnk},
         dataType: "json",
         async: true,
         success: function (r) {
         if (r !==null){
         iarr.push({
                      "title": r.title,
                      "desc": r.desc,
                      "url": r.url
                       });
                       dfd.resolve();
                  }
                  }
       });
  return dfd.promise();
  }
  </code></pre>
  
  <p>Finally, the postmetas function, which should not be called until all the getmeta's are finished:</p>
  
  <pre><code> function postmetas(){
     $.ajax({ //
              url: "meta.php",
              type: "POST",
              data: {url: wik},
              dataType: "json",
              success: function (r) {
                  iarr.push({
                            "title": r.title,
                            "desc": r.desc,
                            "url": r.url
                            });
           console.log(iarr);
                  }
      });
  
        }
  }
  </code></pre>
  
  <p>This works great, and after all the ajax calls have been finished, the log gives me all the values in the iarr array.</p>
  
  <p>Here's the thing: When I changed the postmetas function to the following, the whole thing stopped working, and postmetas gets called before all the "getmeta"s have finished. Can anyone figure out why?</p>
  
  <pre><code>function postmetas() {
  $.ajax({
      url: "http://dbpedia.org/sparql?default-graph-uri=blabla-some-text",
      dataType: "json",
      success: function (r) {
          var descr = r.results.bindings[0].abstract.value;
          var subtitle = descr.substr(0, descr.indexOf('. '));
          iarr.push({
              "title": wtitle, //wtitle is a variable we established before
              "desc": subtitle,
              "url": wurl  //wurl is a variable we established before
          });
          console.log(iarr);
      }
  });
  }
  </code></pre>