ajax投稿要求の前に2つのファイルをロードする

Question

ajax投稿要求のために2つのファイルをロードする必要があります。どうやってAJAX呼び出しの前にそれらが両方ともロードされていることを確認するのですか？現在のコードは次のようになります。

if (options.a) {             
    var reader = new FileReader();            
    reader.readAsBinaryString(options.a);           
    reader.onload = function(evt) {            
     data.a = window.btoa(evt.target.result);     
    }                                   
    } 
    if (options.b) {             
    var reader = new FileReader();            
    reader.readAsBinaryString(options.b);           
    reader.onload = function(evt) {            
     data.b = window.btoa(evt.target.result);     
    }                                   
    }     
    $.ajax({                  
    url: command,                
    data: JSON.stringify(data),             
    type: 'POST',                
    success: function(result, status) { 
     ..... 
    }); 

Answer 1

これは実際にはやっかいです。 1つの方法は、定期的に両方のファイルのステータスを確認するタイマーを設定することです（data.a、data.b）。そして、ajax関数を直接呼び出すのではなく、タイマーを起動します。あなたのタイマー機能が両方がロードされていると判断したら、あなたのajax呼び出しを行います。

if (options.a) {             
    var reader = new FileReader();            
    reader.readAsBinaryString(options.a);           
    reader.onload = function(evt) {            
     data.a = window.btoa(evt.target.result);     
    } 
} 
if (options.b) {             
    var reader = new FileReader();            
    reader.readAsBinaryString(options.b);           
    reader.onload = function(evt) {            
     data.b = window.btoa(evt.target.result);     
    } 
} 

//CHECK THE STATUS OF YOUR FILES EVERY 300 MILLISECONDS 
var postHandler = setInterval(postData, 300); 

//FUNCTION THAT CHECKS THE STATUS OF FILES, DOES THE AJAX POST, AND CLEARS THE TIMER 
function postData() { 
    if (data.a && data.b) { 
    clearInterval(postHandler); 
    $.ajax({ 
     url: command,                
     data: JSON.stringify(data),             
     type: 'POST',                
     success: function(result, status) { 
     ..... 
     } 
    }); 
    } 
} 

Answer 2

この状況を処理するには、promisesを使用します。

var d1 = $.Deferred(); 
var d2 = $.Deferred(); 

$.when(d1, d2).done(function (value1, value2) { 
    console.log(value1); 
    console.log(value2); 
    //make your Ajax call 

}); 

d1.resolve("call one"); //trigger inside of onload a 
d2.resolve("call two"); //trigger inside of onload b 

Answer 3

@ epascarelloの回答で既に提案されているように、約束はここで簡単に使用できます。

ネイティブ・プロミスを使用することができれば、重複したコードとif -checksを取り除くために、このようなことを行うことができます。これにより、$.ajax()が実行される前に、任意の数のファイルをロードすることもできます。

アイデアは、約束事を配列に追加し、それらがすべて解決されるまで待つことです。この約束は、ファイルリーダが読み込みを完了したときに解決されます。

var promises = []; 
Object.keys(options).map(function(key) { 
    if (options[key]) { 
    var promise = new Promise(function(resolve, reject) { 
     var reader = new FileReader(); 
     reader.readAsBinaryString(options[key]); 
     reader.onload = function(evt) { 
     data[key] = window.btoa(evt.target.result); 
     resolve(); 
     } 
    }); 
    promises.push(promise); 
    } 
}); 

//Await all promises in array 
Promise.all(promises) 
    .then(function() { 
     //All data read, execute ajax 
     $.ajax({ 
      url: command, 
      data: JSON.stringify(data), 
      type: 'POST', 
      success: function(result, status) { 
      ..... 
      }); 
     });