javascript - 如何在ajax回调中保留变量？

Question

我编写了一些 JavaScript 来运行“模块”数组。对于每个模块，它都会进行 ajax 调用，获取该模块的 html，并将该模块转储到页面布局上的两列之一。

var modules = [
    { name: 'ExchangeStatus', title: 'Exchange Status', column: 'left' },
    { name: 'Grid', title: 'Contacts', column: 'right' }
    { name: 'Filters', title: 'Filters', column: 'left' }
],
modulesUrl = '/Modules/';

for (var count = 0; count < modules.length; count++) {
    var module = modules[count];

    // Get module HTML.
    $.ajax({
        url: modulesUrl + module.name,
        success: function (moduleHtml) {

            // Append module HTML to appropriate element.
            $('#' + module.column + 'Column').append(moduleHtml);

            // Custom event to trigger the module to load its data.
            var initializeModuleEvent = $.Event('initialize' + module.name);
            initializeModuleEvent.firstLoad = true;
            $(document).trigger(initializeModuleEvent);

        }
    });
}

问题在于 for 循环会产生竞争条件。在 ajax 回调中，module.column 几乎总是最后一个模块的值，因为 for 循环在 ajax 回调返回之前很久就完成了。如何维护模块变量以便每个回调处理适当的模块？目前，所有三个模块最终都位于左列中，因为循环中的最后一个模块位于左列中。

Answer 1

您可以尝试创建一个额外的范围来传递模块:

for (var count = 0; count < modules.length; count++) {
    var module = modules[count];

    (function(module) {
      $.ajax({
        ...
      })
    }(module));

编辑:如果您愿意，也可以使用forEach:

modules.forEach(function(module) {
 // 'module' will be available everywhere in this scope
});