我正在尝试异步加载25个html模板

这是我的代码:

        var loopingLoadTemplate = function(index){
            var name = names[index];

            $.get('templates/' + name + '.html', function (data) {
                that.templates[name] = data;
                tplCount++;
                console.log(tplCount + " " + names.length);
                if (tplCount === names.length){
                    callback();
                }
            });
        };

        for (i = 0; i < names.length; i++){
            loopingLoadTemplate(i);
        }


tplCount是我保留的计数器,因此我知道何时可以安全地执行回调

问题是,有25个模板要加载,当我在Chrome控制台的“网络”标签下检查时,我看到所有25个模板都已正确加载,但是console.log告诉我tplCount停在21,我不知道为什么。是否因为for循环触发得太快而导致$函数的某些回调没有触发?

如何安全地异步加载所有这些模板?

因此,我还尝试了使用递归调用进行同步回退,但是在加载了一些模板后它神秘地停止了,并且没有给出警告标志

        var loadTemplate = function (index) {
            var name = names[index];

            console.log("loading " + names[index]);

            $.get('templates/' + name + '.html', function (data) {
                that.templates[name] = data;
                index++;
                if (index < names.length) {
                    loadTemplate(index);
                    console.log("trying another load");
                } else {
                    callback();
                    console.log("trying callback");
                }
            });
        };
        loadTemplate(0);

最佳答案

好的,只是弄清楚了为什么它失败了

因此,确实所有模板都已正确加载,但是,如果html模板不包含任何内容,则回调函数中的数据将变为未定义,而不是像我期望的那样为空

当数据未定义时,它将使该行失败:

that.templates[name] = data;


没有任何警告或错误,并且回调中的其余代码也不会被执行

由于确实加载了所有模板,因此检查“网络”选项卡将给出所有状态成功结果

09-10 00:41
查看更多