Question

大家好！看起来我有异步操作问题，我无法弄清楚如何处理。

我希望此代码能够显示

第1类，

第1类物品

第2类，

第2类物品

第3类，

第3类物品

而不是我得到的是：

第1类，

第2类，

第3类，

第1类物品

第2类物品

第3类物品

以下是代码：

<MapView.Marker key={index} coordinate={marker.coordinate}
    title={marker.title}
    description={marker.description}
    onPress={e => this.onPressMarker(e,index)}
>

Answer 1

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

通过保持对header元素的引用并在其后面插入由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> 。这样，它会将每个标题与其各自的项目同时附加，从而为您提供所需的输出。

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]);
   }
}

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

2 个答案: