在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/ help?

- black_rabbit

---

可能是重复的问题：如何返回AJAX响应文本？ - Quentin

Answer 1

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

换句话说，因为您的AJAX调用可以在任何时间获得数据（可能需要1秒钟; 可能需要10秒钟），其余的代码（包括return语句）将同步执行，即在服务器有机会响应数据之前执行。

在这些情况下常见的设计解决方案是在回调函数中执行您想要执行的任何操作。

您可以类似于以下方式实现：

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

}

- Josh Beam

---

使用 Promise 接口的 done() 方法，可以这样实现：http://jsfiddle.net/xSKc8/ - A. Wolff

它记录了实际图像，但是当我检查DOM时，仍然会得到img src =“undefined”。看起来var thumb_url最终没有返回。http://jsfiddle.net/gyQS4/3/ - black_rabbit

你不能在这里使用return语句。你必须在回调函数内完成所有操作。请参考此jsfiddle。 - Josh Beam