可变范围。使用闭包？

Question

我正在尝试获取我的 Facebook 照片的所有 URL。 我首先使用专辑 ID 加载“专辑”数组。 然后我遍历相册并使用照片 URL 加载“图片”数组。 （我在 Chrome 的 JS 调试器中看到了这一点）。

但是当代码到达最后一条语句（“返回图片”）时，“图片”为空。

我应该如何解决这个问题？ 我觉得我应该使用闭包，但不完全确定如何最好地做到这一点。 谢谢。

function getMyPhotos() {

        FB.api('/me/albums', function(response) {
            var data = response.data;
            var albums = [];
            var link;
            var pictures = [];


            // get selected albums id's
            $.each(data, function(key, value) {
                if ((value.name == 'Wall Photos')) { 
                        albums.push(value.id);
                }
            });
            console.log('albums');
            console.log(albums);

            // get the photos from those albums
            $.each(albums, function(key, value) {
                FB.api('/' + value + '/photos', function(resp) {
                     $.each(resp.data, function(k, val) {      
                            link = val.images[3].source;
                            pictures.push(link);
                     });
                });
            });

            console.log('pictures');
            console.log(pictures);
            return pictures;

        });
    }

Answer 1

您在程序上考虑您的问题。但是，只要您处理异步请求，此逻辑就会失败。我希望您最初尝试做的事情看起来像这样：

var pictures = getMyPhotos();
for (var i = 0; i < pictures.length; i++) {
    // do something with each picture
}

但是，这不起作用，因为 'pictures' 的值实际上是未定义的（这是任何没有定义实际返回的函数的默认返回类型——这就是你的 getMyPhotos 所做的）

相反，你想做这样的事情：

function getMyPhotos(callback) {
    FB.api('/me/albums', function (response) {
        // process respose data to get a list of pictures, as you have already 
        // shown in your example

        // instead of 'returning' pictures, 
        // we just call the method that should handle the result
        callback(pictures);
    });
}

// This is the function that actually does the work with your pictures
function oncePhotosReceived(pictures){
    for (var i = 0; i < pictures.length; i++) {
      // do something with each picture
    }
};

// Request the picture data, and give it oncePhotosReceived as a callback.
// This basically lets you say 'hey, once I get my data back, call this function'
getMyPhotos(oncePhotosReceived);

我强烈建议您四处搜寻有关 AJAX 回调和异步 JavaScript 编程的更多问题/答案。

编辑：

如果您想方便其他代码使用 FB api 调用的结果，可以将返回值设置为窗口中的“全局”变量：

function getMyPhotos(callback) {
    FB.api('/me/albums', function (response) {
        // process respose data to get a list of pictures, as you have already 
        // shown in your example

        // instead of 'returning' pictures, 
        // we just call the method that should handle the result
        window.pictures = pictures;
    });
}

您现在可以在任何您想要的地方使用全局变量“pictures”（或者，明确地使用 window.pictures）。当然，问题是您必须先调用 getMyPhotos，然后等待响应完成，然后才能使用它们。不需要本地存储。

Answer 2

正如 cmets 中提到的，异步代码就像加利福尼亚酒店 - 你可以随时查看但你永远不能离开。

你有没有注意到FB.api 没有返回值

//This is NOT how it works:
var result = FB.api('me/albums')

而是接收一个延续函数并将其结果传递给它？

FB.api('me/albums', function(result){

原来你需要为你的 getMyPhotos 函数做一个类似的安排：

function getMyPhotos(onPhotos){
    //fetches the photos and calls onPhotos with the 
    // result when done

    FB.api('my/pictures', function(response){

        var pictures = //yada yada

        onPhotos(pictures);
    });
}

---

当然，延续传递风格具有传染性，所以你现在需要调用

getMyPhotos(function(pictures){

而不是

var pictures = getMyPhotos();