如何在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

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

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