ajax運行後調用閉包函數

Question

我是新來的模塊模式和JavaScript中的閉包。我正在嘗試創建一個獲取JSON數據的模塊，以便將其顯示在我的網頁上。

var EmailLogs = (function(){ 

    var emailLogs = []; 
    var config = {}; 

    function init(options){ 
     for(var prop in options) { 
      if(options.hasOwnProperty(prop)){ 
       config[prop] = options[prop]; 
      } 
     } 

     setEmailLogs(); 
    } 

    function setEmailLogs(){ 
     $.ajax({ 
      type: "POST", 
      headers : { "cache-control": "no-cache" }, 
      url: "../../ajax/adminGetEmailLogs.php", 
      data: {options: JSON.stringify(config)}, 
      dataType: 'json', 
      success: function(values){ 
       if(values.success) 
       { 
        emailLogs = values.emailLogs; 
       } 
      } 
     }); 
    } 

    function getEmailLogs(){ 
     return emailLogs; 
    } 

    return{ 
     init: init, 
     getEmailLogs: getEmailLogs, 
    } 

})(); 

var options = { 
     sData : [ 
      'email_id' 
     ], 
     filters : { 
      user_id : 44860, 
     } 
    } 

EmailLogs.init(options); 
console.log(EmailLogs.getEmailLogs()); 

我試圖在init運行時運行ajax調用。然後我正在尋找獲取emailLogs變量來顯示。我認爲，因爲我的ajax正在運行異步，這就是爲什麼我無法獲得我的變量。在運行getEmailLogs（）之前，如何確保setEmailLogs（）已經運行。

Answer 1

$.ajax()實現無極接口，並會返回一個Deferred對象，see the jQuery docs

的jqXHR對象由$。阿賈克斯（）在jQuery 1.5履行承諾的界面的返回，給他們所有的屬性，方法，和Promise的行爲（請參閱Deferred對象以獲取更多信息）。

這意味着您可以使用承諾接口來確保在完成$.ajax()之後運行所需的方法。

修改您的代碼以使用promise界面。基本上$.ajax()向您返回它將被執行的承諾。然後，您可以將您的下一個方法鏈接到執行完成後執行。你經常會看到這樣的鏈接多個承諾模式（在僞代碼）：

doAjaxRequest() 
    .then(doSomethingElse) 
    .then(doAnotherSomethingElse) 

這種方式oppossed到天堂了很多回調調用的海誓山盟，你可以寫很乾淨異步代碼。

The documentation for Q promises有一些很好的例子來解釋承諾的工作方式。

我修改您的代碼段使用的承諾：

var EmailLogs = (function(){ 

    var emailLogs = []; 
    var config = {}; 

    function init(options){ 
     for(var prop in options) { 
      if(options.hasOwnProperty(prop)){ 
       config[prop] = options[prop]; 
      } 
     } 

     setEmailLogs().done(function(values) { 
       if(values.success) 
       { 
        console.log(values.emailLogs) 
       } 
      }); 
    } 

    function setEmailLogs(){ 
     return $.ajax({ 
      type: "POST", 
      headers : { "cache-control": "no-cache" }, 
      url: "../../ajax/adminGetEmailLogs.php", 
      data: {options: JSON.stringify(config)}, 
      dataType: 'json' 
     }); 
    } 

    return{ 
     init: init, 
     getEmailLogs: getEmailLogs, 
    } 

})(); 

var options = { 
     sData : [ 
      'email_id' 
     ], 
     filters : { 
      user_id : 44860, 
     } 
    } 

EmailLogs.init(options);