javascript - 如何在加载另一段动态 HTML 后附加动态 HTML？

Question

我有一个 <OL>和一个读取 json 并加载到 <li> 中的函数的。然后我有另一个函数查看另一个 json 并加载最终的 <li> .我希望第一个函数首先触发，然后第二个函数附加最后一个 <li>后。但是，每 10 个左右的页面中就有 1 个加载第二个函数首先触发，然后 <li> s 出问题了。顺便说一句，用例是动态面包屑。我正在使用 Twitter Bootstrap 的面包屑类来设置这些元素的样式。

第一个触发器:

$.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); 
    }
});

注意:我没有对此进行测试，但根据您的代码，理论上它应该可以工作。