如何在'for'循环中同步'.append（）'和ajax查询

Question

大家好！似乎我有异步操作问题，我不知道如何处理。

我希望显示此代码

第 1 类，

第 1 类物品

第 2 类，

第 2 类物品

第 3 类，

第 3 类物品

我得到的是：

第 1 类，

第 2 类，

第 3 类，

第 1 类物品

第 2 类物品

第 3 类物品

代码如下：

function showSubheadersMenu (items) {
    for (j = 0; j < items.length; j++) {
      $("#gallery").append($("<div id=" + items[j].id + " class=\"gallery-item\"><div class=\"item-img\" style=\"background-image:url(" + items[j].better_featured_image.source_url + ")\"></div></div>"));
    }
  }

 function showSingleCategory (subheader) {
    $("#gallery").append($("<h3 class=\"subcat\">" + subheader.name + "</h3>"));

    $.ajax({
      url: "http://localhost/mysite/wp-json/wp/v2/posts?categories=" + subheader.id + "",
      dataType: "json",
      contentType: "GET",

      success: showSubcategoryItems, // Show items in subcategory

      error: handleAjaxError
   });
 }

if (subheaders.length > 0) { //If there are subcategories
   for (i = 0; i < subheaders.length; i++) {
     showSingleCategory(subheaders[i]);
   }
}

Answer 1

由于 ajax 的异步性，所有的“成功”调用都保证在所有 <h3> 元素被附加后发生。因此，您描述的症状。

通过保持对标题元素的引用并在其后插入由showSubcategoryItems(data) 组成的任何内容，这很容易克服。

function showSingleCategory (subheader) {
    // keep reference to the appended <h3>
    var $header = $("<h3 class=\"subcat\">" + subheader.name + "</h3>").appendTo("#gallery");

    $.ajax({
        url: "http://localhost/mysite/wp-json/wp/v2/posts?categories=" + subheader.id + "",
        dataType: "json",
        contentType: "GET",
        success: function(data) {
            // Show items in subcategory after the corresponding header
            $(showSubcategoryItems(data)).insertAfter($header),
        }
        error: handleAjaxError
    });
}

if (subheaders.length > 0) { //If there are subcategories
    for (i = 0; i < subheaders.length; i++) {
        showSingleCategory(subheaders[i]);
    }
}

而showSubcategoryItems() 将是这种一般形式：

function showSubcategoryItems(data) {
    var html = .....; // compose html from data
    return html;
}

通过同步附加标头，无论接收 ajax 响应的顺序如何，它们的顺序都可以保证与原始 subheaders 一致。

Answer 2

尝试在您的成功回调中添加<h3> inside。这样，它将同时附加每个标题作为其各自的项目，为您提供所需的输出。

function showSingleCategory (subheader) {
    $.ajax({
      url: "http://localhost/mysite/wp-json/wp/v2/posts?categories=" + subheader.id + "",
      dataType: "json",
      contentType: "GET",

      success: function (data) {
        $("#gallery").append($("<h3 class=\"subcat\">" + subheader.name + "</h3>"));
        showSubcategoryItems(data);
      }, // Show items in subcategory

      error: handleAjaxError
   });
}

if (subheaders.length > 0) { //If there are subcategories
   for (i = 0; i < subheaders.length; i++) {
     showSingleCategory(subheaders[i]);
   }
}