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

Keeping variable value while making async call to FB.api

本文关键字：调用 保留 变量值 异步 FB api 在对      更新时间：2023-09-26

我正在尝试使用以下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 调用是异步的。在完成之前，专辑迭代转到最后一个元素。如何更正代码？

你的问题与Javascript闭包有关。

最里面的函数被触发 N 次，但调用在 GetAlbums 完成后执行，并且在每次 N 次执行中，album 变量等于最后一个专辑。

一个快速的解决方法是将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的参数现在可用于内部函数，并且不会更改。

相关文章：