Question

我有一个<OL>和一个读入json并在<li>中加载的函数。然后我有另一个函数，查看另一个json并加载最后的<li>。我希望第一个函数首先触发，然后第二个函数追加最后的<li>。但是，每10个页面中有1个加载第二个函数首先触发，<li> s乱序。 BTW用例是针对动态面包屑的。我正在使用twitter bootstrap的breadcrumb类来设置这些元素的样式。

第一次触发：

$.getJSON("/requirementdesc/{{ catalog }}/"+ c, function(d) {
 $.each(d, function(k, v) {
  $(".breadcrumb").append("<li><a href='/{{ catalog }}/"+ c +"'>"+ v.raw_requirement_desc +"</a></li>");
 });
});

第二次触发：

$.getJSON("/parentrequirement/{{ catalog }}/{{ block }}", function(data) {
 $.each(data, function(key, value) {
  $(".breadcrumb").append("<li class='active'>"+ value.raw_requirement_desc +"</li>");
 });
});

我尝试过使用.promise（），但没有运气。

Answer 1

使用jQuery的$.when()，它提供了一种基于表示异步事件的一个或多个对象来执行回调函数的方法。此代码等待两个调用完成，然后按顺序将li添加到ol。

var li_1,
    li_2;

$.when(
  $.getJSON("/requirementdesc/{{ catalog }}/" + c, function (d) {
    $.each(d, function (k, v) {
      li_1 += "<li><a href='/{{ catalog }}/" + c + "'>" + 
        v.raw_requirement_desc + "</a></li>";
    })
  }),
  $.getJSON("/parentrequirement/{{ catalog }}/{{ block }}", function (data) {
    $.each(data, function (key, value) {
      li_2 += "<li class='active'>" + value.raw_requirement_desc + "</li>";
    })
  })
)
.then(function(){
    if(typeof li_1 === "string" && typeof li_1 !== "undefined") { 
      $(".breadcrumb").append(li_1);
    }
    if(typeof li_2 === "string" && typeof li_2 !== "undefined") { 
      $(".breadcrumb").append(li_2); 
    }
});

注意：我没有对此进行测试，但考虑到您的代码，它理论上应该可行。

在加载另一个动态HTML后，如何附加动态HTML？

1 个答案: