2016-07-07 25 views
0

私はモジュールパターンを新しくし、javascriptで閉じます。 JSONデータを取得するモジュールを作成しようとしていますので、Webページに表示できます。ajaxが実行された後にクロージャー関数を呼び出す

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()が実行されたことを確認する方法を教えてください。

+0

AJAXは非同期です。私。それは同期的に実行されません。あなたのコードは同期しています。 – Liam

+0

[非同期呼び出しから応答を返すにはどうすればよいですか?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Liam

答えて

1

$.ajax()は、

jqXHR see the jQuery docs

は彼らにすべてのプロパティ、メソッドを与え、jQueryの1.5約束のインターフェイスを実装すると$アヤックス()によって返されたオブジェクト、約束のインタフェースを実装し、繰延オブジェクトを返します。 Promiseの動作(詳細についてはDeferredオブジェクトを参照してください)。

これは、promiseインターフェイスを使用して、$.ajax()が実行された後に、必要なメソッドが実行されていることを確認できることを意味します。

プロミスインターフェイスを使用するようにコードを変更します。基本的に$.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); 
関連する問題