javascript - JavaScript/jQuery 中的范围

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 8 年前。

我显然写了太多的 CoffeeScript，因为我现在意识到我对纯 JS 中的作用域没有基本的了解。

玩了一段时间后，我无法找出以下问题--

$(document).ready(function() {
    var myUrl = "http://notimportant.com/"
    var photos = getPhotos(myUrl);
    console.log(photos);                        //undefined
});

function getPhotos(url) {
    var a;
    $.get(url, function(data) {
        a = data["photoset"]["photo"];
        console.log(a);                        //my object
    });
    return a;
}

如果我将 console.log(a) 语句放在 'var a = data["photoset"]["photo"];' 正下方的行上它表明它正确地发出了我正在寻找的 GET 请求。但我发现不可能将该对象传递回我想要操作它的主代码块。

提前致谢。

Answer 1

照片未定义的原因不是因为范围。这是因为 $.get 是异步执行的。 $.get() 返回 jqXHR 对象而不是 HTTP 响应。

onSuccess 回调应传递给 getPhotos() 以使其正常工作。或者可以使用 when().then() 构造。

$(document).ready(function() {
    var myUrl = "http://example.com/";
    getPhotos(myUrl, renderCatPhotos);    
});

function getPhotos(url, onSuccess) {
    $.get(url, onSuccess);
}

function renderCatPhotos(data) {
    var a = data.photoset.photo;
    console.log(a);  // a is always available
}

注意:您甚至可能不需要 getPhotos 函数。您可以简单地在 $(document).ready() 中使用 $.get(url, onSuccess); 来代替。