Javascript Mustache js-导航模板有时未加载

我正在用MustacheJS建立一个网站。在顶部导航中有相当多的数据

问题是，当我加载html时，大约有一半的时间导航没有加载/丢失-输出是一个空div：

<div id="nav"> </div> 

如果有什么帮助的话如果我添加了被注释掉的超时函数，它会工作，但是当我模拟缓慢的internet连接时，问题仍然存在

json文件：

menu.json：

{
"menu_links": [
    {
        "menu_link": "#",
        "menu_text": "link1",
        "menu_id": "link1"
    },
    {
        "menu_link": "#",
        "menu_text": "link2",
        "menu_id": "link2"
    },
    {
        "menu_link": "#",
        "menu_text": "link3",
        "menu_id": "link3"
    },
    {
        "menu_link": "#",
        "menu_text": "link4",
        "menu_id": "link4"
    }

]
} 

products_services.json很长，下面是一个片段：

{
"top_list": [
    {
        "top_list_link": "#",
        "top_list_text": "Top List Text",
        "categories": [
            {
                "category_name": "Name",
                "subcategories": [
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                    },
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                    },
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                    },
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                    },
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                         ...
            ...

我希望我提供了足够的信息。

---

提前感谢您的回答

我们用javascript对象而不是json加载数据，它可以正常工作

jQuery(document).ready(function($){
$.templates = function(page)
{
    var plugin = this;
    var mustache;
    plugin.init = function() {
        getHeader();
        getNav();
        getFooter();
    }

    var getHeader = function(){
        ...
    };

    var getNav = function(){
        var template = Templates.nav;
        var pages = ["products_services"];
       // setTimeout(function() {

            $.ajax({
                type: "GET",
                url: "data/menu.json",
                dataType: "JSON",
                success: function(data) {
                    $('#menuWrapper').html(Mustache.render(template, data));

                    $.each(pages, function(key, val){
                        var template = Templates[val];
                        $.ajax({
                            type: "GET",
                            url: "data/"+val+".json",
                            dataType: "JSON",
                            success: function(data) {
                                var html = Mustache.render(template, data);
                                var menuContent = $('#'+val).find('.menu_content');
                                menuContent.html(html);
                                menuContent.find('.top_list_elem').bind('mouseenter', function(){
                                    var categories = $(this).find('.categories');
                                    var teasers = $(this).find('.teasers');
                                    var categoriesH = categories.outerHeight(true);
                                    var teasersH = teasers.outerHeight();
                                    var height;
                                    if((categories.width() + teasers.width()) > $(window).width())
                                        height = categoriesH + teasersH;
                                    else
                                        height =  Math.max(categoriesH, teasersH);
                                    menuContent.height(height + 50);
                                });
                                menuContent.bind('mouseleave', function(){
                                    $(this).height('');
                                });
                            }
                        });
                    });
                }
            })/*;},30)*/;
    };


    var getFooter = function(){
        ...
    };

    plugin.init();
}
$.fn.templates = function(page)
{
    return this.each(function()
    {
        if (undefined == $(this).data('templates'))
        {
            var plugin = new $.templates(page);
            $(this).data('templates', plugin);
        }
    });
}
var body = $('body');
var page = body.attr('id');
body.templates(page);

});

{
"menu_links": [
    {
        "menu_link": "#",
        "menu_text": "link1",
        "menu_id": "link1"
    },
    {
        "menu_link": "#",
        "menu_text": "link2",
        "menu_id": "link2"
    },
    {
        "menu_link": "#",
        "menu_text": "link3",
        "menu_id": "link3"
    },
    {
        "menu_link": "#",
        "menu_text": "link4",
        "menu_id": "link4"
    }

]
} 

{
"top_list": [
    {
        "top_list_link": "#",
        "top_list_text": "Top List Text",
        "categories": [
            {
                "category_name": "Name",
                "subcategories": [
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                    },
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                    },
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                    },
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                    },
                    {
                        "subcategory_link": "#",
                        "subcategory_name": "Subcategory name 1"
                         ...
            ...