javascript - 在多个页面上使用 .get() 时如何规定 .append() 顺序？

Question

我正在使用 .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();

Answer 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();

或者让一个服务器进程获取数组并返回一个 block 中的数据