在ajax调用jQuery之外传递数据

时间:2014-01-10 18:59:13

标签: javascript jquery ajax vimeo

我从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"/>');

});

小提琴:http://jsfiddle.net/gyQS4/2/ 帮助

1 个答案:

答案 0 :(得分:10)

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

}