js代碼執行問題

今天我遇到一個js代碼的執行問題,

上代碼

$("#primary_menu .nav-menu").append("<li class=\"\">\n" +
    "                <a href=\"//category/"+data+"\">\n" +
    "                <div class=\"num-wrap\"><span>98</span></div>\n" +
    "            <div class=\"nav-name\">"+data.parentCategory.name+"</div>\n" +
    "                </a>\n" +
    "                <ul class=\"sub-nav\">")

$(data.childCategory).each(function () {
    $("#primary_menu .nav-menu").append("<li><a href=\"//www.bilibili.com/v/anime/serial/\"><span>"+this.name+"</span></a></li>")
})
$("#primary_menu .nav-menu").append("</ul></li>")

上面是父分類，下面是子分類,我發現那個遍歷所有子分類並添加到nav-menu的方法會最後執行，

然後我猜測了一下，each方法是異步執行的，在之前就執行最後的添加</ul></li>方法了,導致

沒出來想要的效果

在插入子分類之前就封口了 

後來我把要插入的html代碼通過字符串拼接到一起，就解決了

var content="<li class=\"\">\n" +
    "                <a href=\"//category/"+data+"\">\n" +
    "                <div class=\"num-wrap\"><span>98</span></div>\n" +
    "            <div class=\"nav-name\">"+data.parentCategory.name+"</div>\n" +
    "                </a>\n" +
    "                <ul class=\"sub-nav\">";


$(data.childCategory).each(function () {
    content+="<li><a href=\"//www.bilibili.com/v/anime/serial/\"><span>"+this.name+"</span></a></li>";
})
content+="</ul></li>"
$("#primary_menu .nav-menu").append(content)