函数等待返回，直到$ .getJSON完成 [英] function wait with return until $.getJSON is finished

问题描述

我正在编写一个函数，它必须使用embed.ly API从给定的视频获取缩略图信息，但是目前该函数在它从API获得JSON结果之前返回一个值。

我使用以下代码：

  function getThumbnail（vUrl）{
 var thumbnail =''; 
 var title =''; 
 var caption =''; 
 var content =''; （$ .getJSON（http://api.embed.ly/1/oembed?key=:key&url=+ vurl））.then（函数（数据））
 
 $。 {
 var thumbnail = data.thumbnail_url; 
 console.log（thumbnail）; 
 
返回{
缩略图：缩略图，
 vurl：vurl 
} 
}）; 
} 
  

然而，当使用Chrome Javascript控制台时，我可以看到：

1. 函数被调用


2. 未定义返回


3. XHR请求是完成


4. 变量缩略图内容显示在控制台中
   

这显然是错误的顺序。 / p>

非常感谢任何帮助！

解决方案

更新答案

getJSON 返回一个promise（一个只读延迟），所以你可以听它。但是，由于您需要一些后期处理，您需要链接一个然后，这允许您更改已解决的值。

  //现在使用`then` 
函数getThumbnail（vUrl）{
 return $ .getJSON（http://api.embed.ly/ （函数（data）{
 return {
 thumbnail：data.thumbnail_url，
 vurl：vurl 
 } 
}）; 
} 
 
 //在你的调用中，将听取定制的延期完成
 getThumbnail（'the_vurl _'）。then（function（returndata）{
 //收到的数据！
}）; 
  

---

原始答案

您可以使用延期对象，并监听 done（） 。

  function getThumbnail（vUrl）{
 //创建我们的延期对象
 var def = $ .Deferred（）; 
 
 //获取我们的JSON并听取完成
 $ .getJSON（http://api.embed.ly/1/oembed?key=:key&url=+ vurl ）
 .done（函数（数据）{
 
 //解析延期，将它传递给我们的自定义数据
 def.resolve（{
 thumbnail：data.thumbnail_url ，
 vurl：vurl 
}）; 
}）; 
 
 //返回延迟监听
 return def; 
} 
 
 //在你的调用中将听取定制的延期完成
 getThumbnail（'the_vurl_'）
 .done（function（returndata）{
 //收到数据！
}）; 
  

您可以返回 $。getJSON 的s推迟获取原始数据。但是由于后处理到一个对象中，需要延迟的定制。您也可以将回调传递给 getThumbnail（）：
$ b

  function getThumbnail （vUrl，callback）{
 $ .getJSON（http://api.embed.ly/1/oembed?key=:key&url=+ vurl，函数（returndata）{
 callback （返回）; 
}）; 
 
 
 getThumbnail（'the_vurl _'，function（returndata）{
 // received data！
}）
  

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.

I am using the following code:

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
        }
    });
}

However when using the Chrome Javascript console I can see that:

1. the function is called
2. undefined is returned
3. XHR request is finished
4. variable thumbnail content is shown in console

This is obviously the wrong order.

Any help is greatly appreciated!

解决方案

Updated answer

getJSON returns a promise (a read-only deferred), so you can listen to it. But since you need some post-processing, you'd want to chain a then which allows you to alter the resolved value.

// 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!
});

---

Original answer

You can use a deferred object, and listen for the 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!
    });

You could return $.getJSON's deferred to get the raw data. But because of "post-processing" into an object, the custom deferred is needed. You could also pass a callback to 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!
})

这篇关于函数等待返回，直到$ .getJSON完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！