如何在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 
}); 

Answer 2

這將有助於

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

Answer 3

修改您的成功callb確認此：

$.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電話在這裏。

Answer 4

試試這種方式，告訴我它是否有效！

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

      } 
     }); 
    }()); 
} 

Answer 5

而不是使用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); 

     } 
    }); 
} 
} 
);