javascript同步ajax调用问题

Question

i ma trying to fetch list of names of htmls from ajax call and then for each html another ajax call and then i am trying to append it using handlebar. but this is not happening with below code. can somebody help me in debugging it :

$.getJSON('api/filterTemplate/' + pageName.page, function (data) {
    var promises = [];
    $.each(data, function (i, rec) {
        promises.push($.get('commonCore/templates/' + rec.templateHtml));
    });
    $.when.apply(this, promises).then(function() { //after all requests complete
        $.each(arguments, function(i, html) {
            var filterTemplate = Handlebars.compile(html);
            replaceFilterTemplate(filterTemplate,data[i].classids);// this functions appends html to div -data[i].classids
        })
    })
});

after each html is fetched it should be appended and then next call should happen

Answer 1

$.get returns the jqXHR Object. That's what you're actually adding to your promises array.

You should use synchrone calls, or reformat your code to handle all the fetches async and then proceed through the promises.

Synchrone alternative:

$.each(data, function (i, rec) {
    $.ajax({
        url: 'commonCore/templates/' + rec.templateHtml, 
        async: false,
        success: function(result) {
             promises.push(result);
        }
    });
});