Question

我正在尝试使用以下JavaScript函数获取用户的相册，首先调用获取相册列表，然后在相册中迭代我得到他们的封面图片：

function GetAlbums() {
    FB.api('/me/albums', function(resp) {
        var ul = document.getElementById('albums');
        for (var i=0, l=resp.data.length; i<l; i++) {
            var album = resp.data[i];
            FB.api('/'+album.cover_photo, function(resp1) {
                li = document.createElement('li'),
                a = document.createElement('a');
                a.innerHTML = "<img src='"+resp1.picture+"'/>"+album.name;
                a.href = album.link;
                li.appendChild(a);
                ul.appendChild(li);
                });
        }
    });
};

我不知道为什么但是封面图片确定，但专辑名称总是相同的。可能内部FB.api调用是异步的。在完成专辑之前，迭代会转到最后一个元素。我该如何更正代码？

Answer 1

您的问题与Javascript闭包有关。

最内层函数被触发N次，但调用在GetAlbums完成后执行，album变量等于上一个专辑，在每次N次执行中

快速解决方法是将FB.api('/'+album.cover_photo...移动到单独的函数中：

function getAlbum(album) {
        FB.api('/'+album.cover_photo, function(resp1) {
            li = document.createElement('li'),
            a = document.createElement('a');
            a.innerHTML = "<img src='"+resp1.picture+"'/>"+album.name;
            a.href = album.link;
            li.appendChild(a);
            ul.appendChild(li);
            });
}

function GetAlbums() {
    FB.api('/me/albums', function(resp) {
        var ul = document.getElementById('albums');
        for (var i=0, l=resp.data.length; i<l; i++) {
            getAlbum(resp.data[i]);
        }
    });
};

getAlbum的参数现在可用于内部函数，并且不会更改。

在对FB.api进行异步调用时保持变量值

1 个答案: