Javascript jQuery嵌套了每个/Ajax问题

我嵌套了

每个
循环，但是第二个循环中的Ajax请求似乎没有添加到我在第一个循环中声明的变量中

这是我正在使用的示例（“个人”信息除外）：

var pages = [["Page Title 1", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 2", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 3", ["Page URL 1", "Page URL 2", "Page URL 3"]]];

function loadFeeds() {
$.each(pages, function(index, page) {
    $(".pages").append("<a class=\"pagename\" href=\"#" + page[0] + "\">" + page[0] + "</a>");
    html = "<div class=\"page\" id=\"" + page[0] + "\">";
    $.each(page[1], function(index, feedUrl) {

    $.ajax({
    type: "GET",
    url: feedUrl,
    processData : true,
    data: {
        tagmode: "any"
        },
    jsonp: "jsonp",
    dataType: "jsonp",
    success: function(data) {
        html += "Some header HTML";

        $.each(data.responseData.feed.entries, function(i,entry) {
            if (entry.image_urls.length === 0) {
                html += "HTML from the data";
            }
            else {
                html += "More HTML";
            }

            if ( i == 34 ) return false;
        });
        html += "Closing tags from the header";
        afterAjax();
        // console.log(html); returns correct information here
    },
            error: function(x,y,z) {
                alert(x.responseText);
            }
        });
    // console.log(html); returns everything declared to html OUTSIDE of the ajax request
    });
        $("body").append(html + "</div>");
    // Also tried: $("body").ajaxStop(function(){ $(this).append(html + "</div>"); }); because Ajax is asynchronous
});
}​

var页面=[[“页面标题1”、[“页面URL 1”、“页面URL 2”、“页面URL 3”]、[“页面标题2”、[“页面URL 1”、“页面URL 2”、“页面URL 3”]、[“页面标题3”、[“页面URL 1”、“页面URL 2”、“页面URL 3”]]；
函数loadFeeds（）{
$。每个（页面，函数（索引，页面）{
$（“.pages”）。追加（“”）；
html=“”；
$.each（第[1]页），函数（索引，feedUrl）{
$.ajax({
键入：“获取”，
url:feedUrl，
processData：对，
数据：{
标记模式：“任何”
},
jsonp：“jsonp”，
数据类型：“jsonp”，
成功：功能（数据）{
html+=“一些标题html”；
$.each（data.responseData.feed.entries，函数（i，条目）{
if（entry.image\u url.length==0）{
html+=“来自数据的html”；
}
否则{
html+=“更多html”；
}
如果（i==34）返回false；
});
html+=“从标题关闭标记”；
afterAjax（）；
//log（html）；在此处返回正确的信息
},
错误：函数（x，y，z）{
警报（x.responseText）；
}
});
//log（html）；返回ajax请求之外声明为html的所有内容
});
$（“正文”）.append（html+）；
//还尝试了：$（“body”）.ajaxStop（function（）{$（this.append（html+）；}）；因为Ajax是异步的
});
}​

你知道发生了什么事吗

编辑：

完整的非工作演示、WIP页面功能：

完整的工作演示，无页面功能：

全屏显示：

正常：

请注意，这些没有图像，并且不是完整的应用程序。
请执行以下操作：


在
var页面
之后添加
var html=''
（第1行）
将
html=
更改为
html+=
（第6行）
在
$（“正文”）之后添加
html='
（第41行）


结果:

var pages = [["Page Title 1", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 2", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 3", ["Page URL 1", "Page URL 2", "Page URL 3"]]];
var html = ''; // ADD THIS

function loadFeeds() {
$.each(pages, function(index, page) {
    $(".pages").append("<a class=\"pagename\" href=\"#" + page[0] + "\">" + page[0] + "</a>");
    html += "<div class=\"page\" id=\"" + page[0] + "\">"; //ADD THE +

    $.each(page[1], function(index, feedUrl) {

    $.ajax({
    type: "GET",
    url: feedUrl,
    processData : true,
    data: {
        tagmode: "any"
        },
    jsonp: "jsonp",
    dataType: "jsonp",
    success: function(data) {
        html += "Some header HTML";

        $.each(data.responseData.feed.entries, function(i,entry) {
            if (entry.image_urls.length === 0) {
                html += "HTML from the data";
            }
            else {
                html += "More HTML";
            }

            if ( i == 34 ) return false;
        });
        html += "Closing tags from the header";
        afterAjax();
    },
            error: function(x,y,z) {
                alert(x.responseText);
            }
        });
    });
        $("body").append(html + "</div>");
        html = ''; // RESET HTML TO NEXT Each
});

var页面=[[“页面标题1”、[“页面URL 1”、“页面URL 2”、“页面URL 3”]、[“页面标题2”、[“页面URL 1”、“页面URL 2”、“页面URL 3”]、[“页面标题3”、[“页面URL 1”、“页面URL 2”、“页面URL 3”]]；
var html=“”；//加上这个
函数loadFeeds（）{
$。每个（页面，函数（索引，页面）{
$（“.pages”）。追加（“”）；
html+=“”；//添加+
$.each（第[1]页），函数（索引，feedUrl）{
$.ajax({
键入：“获取”，
url:feedUrl，
processData：对，
数据：{
标记模式：“任何”
},
jsonp：“jsonp”，
数据类型：“jsonp”，
成功：功能（数据）{
html+=“一些标题html”；
$.each（data.responseData.feed.entries，函数（i，条目）{
if（entry.image\u url.length==0）{
html+=“来自数据的html”；
}
否则{
html+=“更多html”；
}
如果（i==34）返回false；
});
html+=“从标题关闭标记”；
afterAjax（）；
},
错误：函数（x，y，z）{
警报（x.responseText）；
}
});
});
$（“正文”）.append（html+）；
html=''；//将html重置为下一个
});
执行以下操作：


在
var页面
之后添加
var html=''
（第1行）
将
html=
更改为
html+=
（第6行）
在
$（“正文”）之后添加
html='
。追加（html+）；
（第41行）

结果:

var pages = [["Page Title 1", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 2", ["Page URL 1", "Page URL 2", "Page URL 3"]], ["Page Title 3", ["Page URL 1", "Page URL 2", "Page URL 3"]]];
var html = ''; // ADD THIS

function loadFeeds() {
$.each(pages, function(index, page) {
    $(".pages").append("<a class=\"pagename\" href=\"#" + page[0] + "\">" + page[0] + "</a>");
    html += "<div class=\"page\" id=\"" + page[0] + "\">"; //ADD THE +

    $.each(page[1], function(index, feedUrl) {

    $.ajax({
    type: "GET",
    url: feedUrl,
    processData : true,
    data: {
        tagmode: "any"
        },
    jsonp: "jsonp",
    dataType: "jsonp",
    success: function(data) {
        html += "Some header HTML";

        $.each(data.responseData.feed.entries, function(i,entry) {
            if (entry.image_urls.length === 0) {
                html += "HTML from the data";
            }
            else {
                html += "More HTML";
            }

            if ( i == 34 ) return false;
        });
        html += "Closing tags from the header";
        afterAjax();
    },
            error: function(x,y,z) {
                alert(x.responseText);
            }
        });
    });
        $("body").append(html + "</div>");
        html = ''; // RESET HTML TO NEXT Each
});

var页面=[[“页面标题1”、[“页面URL 1”、“页面URL 2”、“页面URL 3”]、[“页面标题2”、[“页面URL 1”、“页面URL 2”、“页面URL 3”]、[“页面标题3”、[“页面URL 1”、“页面URL 2”、“页面URL 3”]]；
var html=''；//添加此
函数loadFeeds（）{
$。每个（页面，函数（索引，页面）{
$（“.pages”）。追加（“”）；
html+=“”；//添加+
$.each（第[1]页），函数（索引，feedUrl）{
$.ajax({
键入：“获取”，
url:feedUrl，
processData：对，
数据：{
标记模式：“任何”
},
jsonp：“jsonp”，
数据类型：“jsonp”，
成功：功能（数据）{
html+=“一些标题html”；
$.each（data.responseData.feed.entries，函数（i，条目）{
if（entry.image\u url.length==0）{
html+=“来自数据的html”；
}
否则{
html+=“更多html”；
}
如果（i==34）返回false；
});
html+=“从标题关闭标记”；
afterAjax（）；
},
错误：函数（x，y，z）{
警报（x.responseText）；
}
});
});
$（“正文”）.append（html+）；
html=''；//将html重置为下一个
});
除非您的ajax调用是同步的（我看不出有任何迹象表明它们是同步的），否则您的每个循环都将在ajax调用成功函数运行之前完成并返回。您不能这样构造代码。这意味着
$（“body”）.append（html+“”）；
将在ajax调用有机会向
html
变量添加任何内容之前运行

您需要将ajax响应回调视为独立的代码片段，在
.each（）之后的某个时间运行
循环已经完成，并且在设计响应的处理时要牢记这一假设。还要记住，多个ajax调用甚至不能保证按照发送顺序完成

您可以通过发送一个ajax调用而不发送下一个调用来对ajax调用进行排序，直到该调用完成，将组合的html保持在字符串变量中，就像您所做的那样，然后在最后一个ajax调用的completion函数中，将最终累积的html字符串附加到主体中

还有一个问题。在第一次
开始时，each（）
lo
$("body").append(html + "</div>");

$("body").append(html + "</div>");

    html += "Closing tags from the header";
    afterAjax();
    // console.log(html); returns correct information here
    $("body").append(html + "</div>");
},

function loadFeeds() {
    html = "";
    $.ajaxStop(function(){$(document.body).append(html + "</div>);

    $.each(pages, function(index, page) {
        $(".pages").append("<a class=\"pagename\" href=\"#" + page[0] + "\">" + page[0] + "</a>");
        html = "<div class=\"page\" id=\"" + page[0] + "\">";
    ...
}

$(document).ready(function () {
    var html = [];
    var feeds = ["http://pulsesubscriber.appspot.com/items?feed=http://feeds.gawker.com/lifehacker/vip&jsonp=?",
                 "http://pulsesubscriber.appspot.com/items?feed=http://allthingsd.com/feed&jsonp=?",
                 "http://pulsesubscriber.appspot.com/items?feed=http://feeds.cnet.com/latestnews/pulse&jsonp=?"];
    loadFeeds(feeds);

    function loadFeeds(feeds) {
        var requests = [];

        $.each(feeds, function(index, feedUrl) {
            requests.push($.ajax({
                type: "GET",
                url: feedUrl,
                processData : true,
                data: {
                    tagmode: "any"
                    },
                jsonp: "jsonp",
                dataType: "jsonp",
                success: function(data) {
                    var feedElements = "<header class=\"feed-title\"><div class=\"feed-title-content\"><span class=\"feed-title-text\">" +
                        data.responseData.feed.title +
                        "</span></div></header><section class=\"row\"><div class=\"scroll-left\"></div><div class=\"row-scroll\">";

                    $.each(data.responseData.feed.entries, function(index,entry) {
                        var feedElements = '';
                        if (entry.image_urls.length === 0) {
                            feedElements += "<div class=\"tile no-img\"><title class=\"tile-title no-img\">" +
                                entry.title +
                                "</title><hr class=\"no-img hr\" /><span class=\"no-img excerpt\">" +
                                entry.contentSnippet +
                                "</span><div class=\"tile-modal\"><div class=\"article-wrapper\">\r\n<div class=\"article-header\">\r\n<a class=\"article-title-link\" target=\"_blank\" href=\"" +
                                entry.link +
                                "\">\r\n<h1 class=\"article-title\">" +
                                entry.title +
                                "</h1>\r\n</a>\r\n<h2 class=\"article-byline\">By " +
                                entry.author +
                                ": " +
                                data.responseData.feed.title +
                                "</h2>\r\n</div>\r\n<hr class=\"article-hr\"/>\r\n<div class=\"article-content\">" +
                                entry.content +
                                "\r\n<a class=\"read-more\" target=\"_blank\" href=\"" +
                                entry.link +
                                "\">Read More...</a>\r\n</div>\r\n</div></div></div>\r\n";
                        }
                        else {
                                feedElements += "<div class=\"tile\"><img class=\"tile-image\" src=\"" +
                                entry.image_urls[0] +
                                "\" /><title class=\"tile-title\">" +
                                entry.title +
                                "</title><div class=\"tile-modal\"><div class=\"article-wrapper\">\r\n<div class=\"article-header\">\r\n<a class=\"article-title-link\" target=\"_blank\" href=\"" +
                                entry.link +
                                "\">\r\n<h1 class=\"article-title\">" +
                                entry.title +
                                "</h1>\r\n</a>\r\n<h2 class=\"article-byline\">By " +
                                entry.author +
                                ": " +
                                data.responseData.feed.title +
                                "</h2>\r\n</div>\r\n<hr class=\"article-hr\"/>\r\n<div class=\"article-content\">" +
                                entry.content +
                                "\r\n<a class=\"read-more\" target=\"_blank\" href=\"" +
                                entry.link +
                                "\">Read More...</a>\r\n</div>\r\n</div></div></div>\r\n";
                        }
                        html.push(feedElements);
                        console.log('updated elements');
                        if(index == 34 ){
                            return false;
                        }
                    });
                },
                error: function(x,y,z) {
                    console.log(x.responseText);
                }
            }));
        });

        $.when.apply(this,requests).done(function(){
            console.log('when!');
            console.log(html);
            $(document.body).append($(html.join('')));
            afterAjax();
        });

    }



    $("#refresh-all").click(function(){
        $("body > header, body > section").remove();
        $("body").removeClass("active");
        loadFeeds();
    });

    function afterAjax() {
            $(".page:first").addClass("active");
            $(".tile").click(function(){
            if ($(".tile-modal.tile-modal-active").length) {
                $(".tile-modal.tile-modal-active").removeClass("tile-modal-active");
                $(this).children(".tile-modal").addClass("tile-modal-active");
            }
            else {
                $(this).children(".tile-modal").addClass("tile-modal-active");
                $("body").addClass("active");
            }
        });


        $(".scroll-left").hover(function(){
            $(this).parent().animate({scrollLeft: 0}, 7000);
        }, function() {
            $(this).parent().stop();
        });

        $(".scroll-right").hover(function(){
            $(this).parent().animate({scrollLeft: $(this).siblings(".row-scroll").width()}, 7000);
        }, function() {
            $(this).parent().stop();
        });
    }
});