Are recursive AJAX calls a bad idea?

Yes. Making multiple AJAX calls this way is a bad idea, but possibly not for the reason that you think.

This is going to cause all of your calls to be executed sequentially rather than making the calls in parallel and waiting for them to finish that way.

You'd be far better off using promises to make all of your calls and then waiting for all of them to finish before continuing. It would look something like:

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]);   }});

Although it looks recursive (and I also use the term recursive Ajax for this) technically your function exits before it is called again, so is not actually recursive... perhaps we should call them "chained" Ajax calls as it is just chaining Async events together? :)

There is no problem doing it this way, if you do not mind queuing your Ajax request one at a time. I used it this way a few times to ensure bandwidth use was acceptable.

You need to be careful of edge cases, so that it handles server errors gracefully.

This is actually a good technique for handling mobile devices which will choke on a large number of requests going out at once.

I wrote have a plugin that loaded sections of a massive application form via Ajax and found devices like the iPad could not cope with more than a handful of simultaneous Ajax requests. I wound up using recursive/chained Ajax calls to solve the problem (and had the bonus of not choking our server too) :)

Your updated code is much better than your initial one, but it still has a few issues, the main one being mixing promises and callbacks instead of using language facilities (Return value) and not using mappings.

Some improvements can be:

• returning the promise instead of a callback argument
• using .map instead of forEach with push.
• Using .then instead of a success callback for avoiding two handlers for the same thing and potentially unspecified behavior (does the when execute first? Does the success:?)

We can do something like:

function getTemplatesAsync(names) {    return $.when.apply(null,names.map(function (name, index) {        return $.get('/templates/' + names[index] + '.min.html');    }).then(function(results){         // map arguments to names         return Array.prototype.reduce.call(arguments, function(obj,cur,idx){               obj[names[idx]] = cur;               return obj;         },{});    });}

Which lets you do:

getTemplatesAsync(names).then(function(templates){     // access templates here});