等待所有功能和要求完成

Question

Right now I've got some code that takes in an array of strings of the modules I wish to load

script.js

moduleLoader.load([
    'mainModule',
    'aboutUsModule',
    'featuresModule',
    'messageModule'
]);

The moduleLoader.load function does an $.each loop on the array and then proceeds to get the required information about each module.

moduleLoader

var load = function (modules) {
    $.each(modules, function (index, module) {
        getConfig(module);
    });
};

getConfig

var getConfig = function (module) {
    $.get(module + '/config.json').done(function (config) {
        console.log(config);
        getData(config);
    }).fail(function () {
        console.error('Couldn\'t find a config file for module: ' + module);
        return 0;
    });
};

Then you can see in the getConfig callback that it proceeds to get data, which is also async, and then it has two more steps after that which is async.

So it's basically callback inside callback inside callback... etc..

Just that I divided it into functions so that it looks a bit nicer.

Now I can get all the info, but it loads differently every time, so is it possible to know when all the ajax requests are done, and then do something?

Answer 1

You could use the jQuery function $.when() that does exactly what you need: https://api.jquery.com/jquery.when/

To make your code work you can refactor a bit:

var XHRs = [];

var load = function (modules) {
  $.each(modules, function (index, module) {
    XHRs.push(getConfig(module));
  });
};

$.when(XHRs).then(function() {
  // do something
});

And also your getConfig() function should return the $.get . This works because $.ajax in jQuery creates a Deferred object that actually lets you chain your functions or make them wait each other.

For future reference: https://api.jquery.com/jquery.deferred/

Answer 2

You can utilize promise chaining and group them all together and do something when they are all done (kind of like this):

var load = function (modules) {
    var promises = modules.map(getConfig);

    // can use $.when or Promise.all here
    $.when.apply($, promises).then(function () {
         // do something when all done
    });
};

var getConfig = function (module) {
    // $.get returns a jqXHR which is "thennable"
    return $.get(module + '/config.json').then(function (config) {
        console.log(config);
        // if this also returns a promise then it will
        // wait till this one is done as well in the promise chain
        return getData(config); 
    }, function () {
        console.error('Couldn\'t find a config file for module: ' + module);
        return 0;
    });
};

Answer 3

If you have no other pending ajax requests, then use relevant global ajax event ajaxStop :

$( document ).one('ajaxStop', function() {
  // all ajax requests has finished
});