function wait with return until $ .getJSON finaliza

Question

Estoy escribiendo una función que tiene que obtener la información en miniatura de un video determinado utilizando la API embed.ly, sin embargo actualmente la función devuelve un valor incluso antes de obtener el resultado JSON de la API.

estoy usando el siguiente código:

function getThumbnail(vUrl) { 
    var thumbnail = ''; 
    var title  = ''; 
    var caption  = ''; 
    var content  = ''; 

    $.when($.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl)).then(function(data){ 
     var thumbnail = data.thumbnail_url; 
      console.log(thumbnail); 

     return { 
      thumbnail:thumbnail, 
      vurl:vurl 
     } 
    }); 
} 

Sin embargo cuando se utiliza la consola de Chrome Javascript puedo ver que:

1. la función se llama
2. indefinido se devuelve
3. XHR la solicitud ha finalizado
4. el contenido de la miniatura variable se muestra en la consola

Esto obviamente no es el orden correcto.

¡Cualquier ayuda es muy apreciada!

Answer 1

respuesta Actualizado

getJSON devuelve una promesa (de sólo lectura diferida), para que pueda escuchar a la misma. Pero como necesita algún postprocesamiento, querría encadenar un then que le permite alterar el valor resuelto.

// Now using `then` 
function getThumbnail(vUrl){ 
    return $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl).then(function(data){ 
    return { 
     thumbnail:data.thumbnail_url, 
     vurl:vurl 
    } 
    }); 
} 

//and in your call will listen for the custom deferred's done 
getThumbnail('the_vurl_').then(function(returndata){ 
    //received data! 
}); 

---

Respuesta original

Puede utilizar un deferred object, y escuche el done().

function getThumbnail(vUrl) { 
    //create our deferred object 
    var def = $.Deferred(); 

    //get our JSON and listen for done 
    $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl) 
     .done(function(data){ 

      //resolve the deferred, passing it our custom data 
      def.resolve({ 
       thumbnail:data.thumbnail_url, 
       vurl:vurl 
      }); 
     }); 

    //return the deferred for listening 
    return def; 
} 

//and in your call will listen for the custom deferred's done 
getThumbnail('the_vurl_') 
    .done(function(returndata){ 
     //received data! 
    }); 

Se podía volver $.getJSON 's diferidos para obtener los datos en bruto. Pero debido al "postproceso" en un objeto, es necesario el aplazamiento personalizado. También podría aprobar una devolución de llamada a getThumbnail():

function getThumbnail(vUrl,callback) { 
    $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl,function(returndata){ 
     callback(returndata); 
    }); 
} 

getThumbnail('the_vurl_',function(returndata){ 
    //received data! 
}) 

Answer 2

que pueda devolución de llamada $.getJSON simples de uso es como siguiente:

function result(res) { 
    console.log(res); 
} 

function getThumbnail(vUrl) { 
    var thumbnail = ''; 
    var title  = ''; 
    var caption  = ''; 
    var content  = ''; 

    $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl, function(data) { 
    var thumbnail = data.thumbnail_url; 
    console.log(thumbnail); 

    var result = { 
     thumbnail:thumbnail, 
     vurl:vurl 
     }; 

    // passing the result to a function 
    getResult(result); 

    }); 
} 

NOTA:

Ves que estoy llamando a una función para pasar el resultado, en el que está tratando de return , pero no puede return resultado para la función de llamada. Porque, $.getJSON es asincrónico.