Question

现在我有一些代码可以接收我想要加载的模块的字符串数组

的script.js

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

moduleLoader.load函数在数组上执行$.each循环，然后继续获取有关每个模块的必需信息。

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

然后你可以在getConfig回调中看到它继续获取数据，这也是异步的，然后它又有两个步骤，即异步。

所以它基本上是在回调内回调......等等。

只是我把它分成了函数，以便它看起来更好。

现在我可以获取所有信息，但每次都会加载不同的信息，因此可以知道所有ajax请求何时完成，然后再做一些事情？

Answer 1

您可以使用完全符合您需要的jQuery函数$.when()： https://api.jquery.com/jquery.when/

为了让您的代码有效，您可以稍微重构一下：

var XHRs = [];

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

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

此外，您的getConfig()函数还应返回$.get。这是有效的，因为jQuery中的$ .ajax创建了一个Deferred对象，它实际上允许你链接你的函数或使它们彼此等待。

供将来参考： https://api.jquery.com/jquery.deferred/

Answer 2

你可以利用承诺链并将它们组合在一起并在完成后做一些事情（有点像这样）：

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

如果您没有其他待处理的ajax请求，请使用相关的全局ajax事件ajaxStop：

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

等待所有功能和要求完成

3 个答案: