在多个页面上使用 .get() 时如何指定 .append() 顺序？答案

【问题标题】：How to dictate .append() order when using .get() on multiple pages?在多个页面上使用 .get() 时如何指定 .append() 顺序？
【发布时间】：2017-01-25 16:05:51
【问题描述】：

我正在使用 .get() 从一系列页面中提取内容，并希望按照每个页面出现在我设置的数组中的顺序附加提取的内容。但是，聚合页面会在项目准备就绪后立即追加它们。如何指定附加项目的顺序？

function loadHTML() {
    for(i = 0; i < 4; i++) {                        
        var slug = ["slug-1", "slug-2", "slug-3", "slug-4"]
        $.get('http://website.com/' + slug[i], function(data) { 
            var text = $(data).find(".text").html();
            var title = $(data).find("#title").html();
            $("#page").append("<div class='content_block'><h1>" + title + "</h1>" + text + "</div>");
        });
    }
};  

loadHTML();

【问题讨论】：

stackoverflow.com/questions/2687679/…
递归调用怎么样？所以当第一个被加载时，第二个被调用？异步 javascript 的问题是您无法控制它们何时检索。
一般来说，在一个循环中发出多个 get 请求并不是一个好主意。更新服务器上的接收操作以便能够接收一组值并处理它们，如果可能的话，在一次调用中发送回多个结果可能会更好。如果其中一个调用失败，或者更糟的是挂起，但您依赖所有调用成功返回怎么办？
您可以将内容保存在内存中，而不是在获取它们后直接附加它们。只需创建一个像 "$("
")" 这样的变量来保存内容，并将变量放在数组或 json 结构中。最后一页的“未完成”，您可以按所需顺序附加内容，也许您只是对 javascript 排序有点混乱。（而且你绝对应该避免关闭异步，这是不好的做法）

标签： javascript jquery

【解决方案1】：

你需要使用回调再次调用：

var cnt = 0;
var slug = ["slug-1", "slug-2", "slug-3", "slug-4"];
function loadHTML() {
  if (cnt>=slug.length) return; // stop
  $.get('http://website.com/' + slug[cnt++], function(data) { 
    var text = $(data).find(".text").html();
    var title = $(data).find("#title").html();
    $("#page").append("<div class='content_block'><h1>" + title + "</h1>" + text + "</div>");
    loadHTML();
  });
}
loadHTML();

或者让一个服务器进程获取数组并以一个块的形式返回数据

【讨论】：

谢谢！这对我有用！一旦时间限制过去，将更新以接受答案。