Question

我正在尝试异步加载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);

Answer 1

好的，只是想出它失败的原因

所以，确实所有模板都已正确加载，但是，如果html模板没有内容，则回调函数中的数据将变为未定义，而不是像我预期的那样为空

当数据未定义时，它会失败：

that.templates[name] = data;

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

由于所有模板都已加载，因此检查网络选项卡将提供所有状态成功结果

异步模板加载

1 个答案: