异步模板加载答案

【问题标题】：Async Template loading异步模板加载
【发布时间】：2013-04-23 17:24:00
【问题描述】：

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

【问题讨论】：

我敢打赌，有些模板没有加载成功。我会尝试缩短 URL 列表并寻找那些不起作用的。
虽然每个模板都有成功状态..
好吧，事实是事情并没有像您期望的那样工作。用较短的列表测试代码似乎是一个值得的实验。
您也可以尝试使用$.ajaxError() 定义一个错误处理程序，如果 jQuery 认为请求失败，将调用该处理程序。
！！太奇怪了，我刚刚发现，在 4 个模板中，它是空的..所以我的猜测是，如果模板为空，回调函数中的数据将变为未定义并且失败且没有警告..通过添加 "
" 到空模板

标签： javascript jquery templates asynchronous promise

【解决方案1】：

好的，刚刚弄清楚它失败的原因

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

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

that.templates[name] = data;

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

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

【讨论】：