javascript - javascript中奇怪的变量范围

Question

所以我用 javascript 编写了这段代码:

// Additional initialization code such as adding Event Listeners goes here
            FB.api('593959083958735/albums', function(response) {
                if(!response || response.error) {
                    // render error
                    alert("Noo!!");
                } else {
                    // render photos
                    for(i=0; i<response.data.length; i++){
                        var albumName = response.data[i].name;
                        var albumCover = response.data[i].cover_photo;
                        var albumId = response.data[i].id;
                        console.log(albumName);
                        FB.api( albumCover, function(response) {
                            if(!response || response.error) {
                                // render error
                                alert("Noo!!");
                            } else {
                               // render photos
                               $("ul").append('<li>'+
                                    '<a href="testFile.HTML" data-transition="slidedown">'+
                                    '<img src= "' + response.picture + '"  />'+
                                     '<h2>' + albumName + '</h2>'+
                                     '<p> Test Paragraph</p>'+
                                     '</a>'+
                                     '</li>')
                                .listview('refresh');
                            }
                        });                                 
                    }
                }
            });

我正在使用facebooks javascript API，将facebook页面的相册导入到我的jquery移动页面并将它们放入listView中。如您所见，我动态创建了 listView。 listView 有相册 coverPhoto 和标题、相册名称作为缩略图。

但是这里出了严重的问题。上面代码的结果可以看到here

缩略图全部正确，但相册名称错误。在每个单元格中我都会得到最后一个专辑名称。当我在代码中使用 console.log(albumName) 时，如您所见，我得到的所有名称都是正确的。但在第二次调用 FB.api 时，"albumName" 变量仅保存最后一个专辑名称。

知道这是怎么回事吗？它真的让我发疯......

Answer 1

看起来你有著名的 i for 循环问题，你只引用了 i。

                for (var i = 0; i < response.data.length; i++) {  //added the var here
                    (function (i) {  //created a function
                        var albumName = response.data[i].name;
                        var albumCover = response.data[i].cover_photo;
                        var albumId = response.data[i].id;
                        console.log(albumName);
                        FB.api(albumCover, function (response) {
                            if (!response || response.error) {
                                // render error
                                alert("Noo!!");
                            } else {
                                // render photos
                                $("ul").append('<li>' +
                                    '<a href="testFile.HTML" data-transition="slidedown">' +
                                    '<img src= "' + response.picture + '"  />' +
                                    '<h2>' + albumName + '</h2>' +
                                    '<p> Test Paragraph</p>' +
                                    '</a>' +
                                    '</li>')
                                    .listview('refresh');
                            }
                        });
                    })(i);  //call the function with i
                }