保持變量的值，同時使異步調用FB.api

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現在可用於內部功能，並不會改變。