函數等待返回，直到$ .getJSON完成

Question

我正在寫一個函數，它必須使用embed.ly API從給定視頻獲取縮略圖信息，但是當前該函數在它獲得JSON結果之前返回一個值來自API。

我使用下面的代碼：

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

但是使用Chrome的JavaScript控制檯時，我可以看到：

1. 函數被調用
2. 未定義返回
3. XHR請求已完成
4. 變量縮略圖內容顯示在控制檯中

這顯然是錯誤的順序。

任何幫助，非常感謝！

Answer 1

更新答案

getJSON返回一個承諾（只讀延期），這樣你就可以聽。但是由於您需要一些後期處理，您需要鏈接一個then，它允許您更改已解決的值。

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

---

原來的答覆

您可以使用deferred object，並聽取了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! 
    }); 

您可以返回$.getJSON的延期以獲取原始數據。但是由於「後處理」到一個對象中，需要延遲的自定義。你也可以傳遞一個回調到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

你可以簡單的使用$.getJSON的回調像以下：

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

    }); 
} 

注：

你看到，我調用函數傳遞的結果，在那裏你試圖return ，但是你不能return結果給調用者函數。因爲，$.getJSON是異步的。