0

次の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呼び出しは非同期です。そしてそれが終了する前に、アルバムの反復は最後の要素に行きます。コードを修正するにはどうすればよいですか？

4

1 に答える 1

1

あなたの問題は、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]);
        }
    });
};

引数 togetAlbumは内部関数で使用できるようになり、変更されません。

于 2012-04-12T07:17:29.563 に答える