javascript - 在 ajax 调用、jQuery 之外传递数据

Question

我正在从 API 获取 vimeo 缩略图，我正在使用 jQuery 函数将数据附加到 dom。

我试图在 ajax 之外访问 thumb_url，因此我可以将它返回给 jQuery，但它不起作用。

function getThumb(vimeoVideoID) {
var thumb_url;

$.ajax({
    type: 'GET',
    url: 'http://vimeo.com/api/v2/video/' + vimeoVideoID + '.json',
    jsonp: 'callback',
    dataType: 'jsonp',
    success: function (data) {
        console.log(data[0].thumbnail_large);
        thumb_url = data[0].thumbnail_large;
    }
});
return thumb_url;
}

$('.video').each(function () {
var thumb_url = getThumb(this.id);
$(this).append('<img src="' + thumb_url + '" class="video_preview"/>');

});

fiddle :http://jsfiddle.net/gyQS4/2/帮助？

Answer 1

因为 AJAX 调用是异步的，所以您无法以您尝试的方式返回和访问 thumb_url。

换句话说，因为您的 AJAX 调用可以随时获取数据(可能需要 1 秒；也可能需要 10 秒)，其余代码(包括返回 语句)将同步执行，即在服务器有机会响应数据之前。

在这些情况下使用的一种常见设计解决方案是在回调函数中执行您想要执行的任何内容。

你可以做类似的事情:

success: function (data) {
    console.log(data[0].thumbnail_large);
    thumb_url = data[0].thumbnail_large;

    //utilize your callback function
    doSomething(thumb_url);
}

/*     then, somewhere else in the code      */

//this is your callback function
function doSomething(param) {

    //do something with your parameter
    console.log(param);

}