title: function wait with return until $.getJSON is finished
body: <p>I am writing a function which has to get the thumbnail information from a given video using the embed.ly API, however currently the function returns a value before it even got the JSON result from the API.</p>
  
  <p>I am using the following code:</p>
  
  <pre><code>function getThumbnail(vUrl) {
      var thumbnail   = '';
      var title       = '';
      var caption     = '';
      var content     = '';
  
      $.when( $.getJSON("http://api.embed.ly/1/oembed?key=:key&amp;url="+vurl) ).then(function(data){
          var thumbnail = data.thumbnail_url;
              console.log(thumbnail);
  
          return {
              thumbnail:thumbnail,
              vurl:vurl
          }
      });
  }
  </code></pre>
  
  <p>However when using the Chrome Javascript console I can see that:</p>
  
  <ol>
  <li>the function is called</li>
  <li>undefined is returned </li>
  <li>XHR request is finished </li>
  <li>variable thumbnail content is shown in console</li>
  </ol>
  
  <p>This is obviously the wrong order.</p>
  
  <p>Any help is greatly appreciated!</p>