jquery - 递归 AJAX 调用是一个坏主意吗？

Question

我有一个简单的函数来提取模板数组:

function getTemplates(names, done, templates, index) {
    if (!index) index = 0;
    if (!templates) templates = {};
    if (index === names.length) return done(templates);
    $.ajax({
        url: '/templates/' + names[index] + '.min.html',
        success: function (data, status, xhr) {
            templates[names[index++]] = data;
                return getTemplates(names, done, templates, index);
        }
    });
}

对我来说，从一个到下一个似乎是合乎逻辑的，直到它们全部被检索，然后回调到调用函数。但我很好奇这样做是否有任何不良副作用。到目前为止我还没有看到任何问题，但在没有首先了解任何潜在问题的情况下，我不想将其投入生产。

<小时/>

更新:在 Google 和 BenjaminGruenbaum 的帮助下，我设计了一个解决方案:

function getTemplatesAsync(names, done) {
    var calls = [];
    var templates = {};
    names.forEach(function (name, index) {
        calls.push(
            $.ajax({
                url: '/templates/' + names[index] + '.min.html',
                success: function (data, status, xhr) {
                    templates[names[index++]] = data;
                }
            })
        );
    });
    $.when.apply($, calls).done(function () {
        // using "templates" here feels fragile for some reason.  Am I wrong?
        return done(templates);
    });
}

我在这里使用templates，因为我需要能够按名称引用每个模板，但不知怎的，它感觉脆弱或不可靠。这看起来安全吗？

Answer 1

是的。以这种方式进行多个 AJAX 调用是一个坏主意，但原因可能不是您想象的那样。

这将导致所有调用按顺序执行，而不是并行调用并等待它们完成。

使用 promises 会更好调用所有电话，然后等待所有电话完成后再继续。它看起来像:

var promises = [], templates = [], i;
for(i = 0; i < names.length; i++) {
    promises.push($.get('/templates/' + names[i] + '.min.html'));
}

$.when.apply($, promises).done(function(responses) {
   for(i = 0; i < responses.length; i++) {
       templates.push(responses[i][0]);
   }
});