我写了一些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回调返回之前很久就结束了。如何维护模块变量,以便每个回调都处理相应的模块?目前,所有三个模块都在左列中结束,因为循环中的最后一个模块位于左列。
答案 0 :(得分:7)
您可以尝试创建一个额外的范围来传递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
});
答案 1 :(得分:2)
将您的成功回调修改为:
$.ajax({
url: modulesUrl + module.name,
success: (function (module) {
return 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);
};
}(module));
});
这将为适当的module
变量值创建一个新范围。
此处无需包含整个ajax
电话。
答案 2 :(得分:2)
而不是使用for循环使用jquery的每个..这将解决问题
var modules = [
{ name: 'ExchangeStatus', title: 'Exchange Status', column: 'left' },
{ name: 'Grid', title: 'Contacts', column: 'right' }
{ name: 'Filters', title: 'Filters', column: 'left' }
],
modulesUrl = '/Modules/';
$(modules).each( function(index, elem)
{
var module = elem;
// 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);
}
});
}
}
);
答案 3 :(得分:1)
这会有所帮助
for (var count = 0; count < modules.length; count++) {
var module = modules[count];
(function (module) {
// 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 initia`enter code here`lizeModuleEvent = $.Event('initialize' + module.name);
initializeModuleEvent.firstLoad = true;
$(document).trigger(initializeModuleEvent);
}
});
})(module)
}
答案 4 :(得分:0)
试试这种方式并告诉我它是否有效!
for (var n = 0; n < modules.length; n++) {
(function () {
var i = n;
var module = modules[i];
// 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);
}
});
} ());
}