jQueryを順次実行し、非同期イベント

Question

私は（ループで）順次、いくつかの非同期イベントを実行jQueryを使っていくつかのJavaScriptをコーディングしようとしています。以前の非同期イベントが完了した後にのみ反復処理を行います。

基本的な考え方は次のとおりです。

for (var i = 0; i < someLength; i++) { 
    // 1. dynamically add a <form> and <input>s to the DOM 
    // 2. submit the form to a target <iframe> 
    // 3. wait for an async callback indicating the form has been submitted 
} 

私は＃1、＃2のコードを働いている、と私は、フォームを送信したときに知ってにloadイベントリスナーを添付することができますが完了しました：

$('.iframe').on('load', function() { ... 
}); 

for (var i = 0; i < someLength; i++) { 
    // 1. dynamically add a <form> and <input>s in the DOM 
    // 2. submit the form to a target <iframe> 
    // 3. wait for an async callback indicating the form has been submitted 
} 

問題は、私はループロジックにreadyコールバックを結びつける方法がわからないです。私は延期/約束を調べようとしましたが、実際にこれらの概念を正しく適用する方法は見当たりませんでした。

答えが約束を使用するのであれば、ループが進行している間に「ローディング」スピナーを表示するコードを組み込んでループの外に出たらスピナーを削除する方法も見たいと思う。

ありがとうございます！

Answer 1

For-loopのようなもの、あなたがチェーン彼らにしたい場合は特に非同期操作を嫌います。解決策は次のようになります。

$('.iframe').on('load', function() { ... 
    // increment i 
    //if(i >= someLength) exit 
    // 1. dynamically add a <form> and <input>s in the DOM 
    // 2. submit the form to a target <iframe> 
}); 

//for (var i = 0; i < someLength; i++) {//no loop 
//} 
    // 1. dynamically add a <form> and <input>s in the DOM 
    // 2. submit the form to a target <iframe> 
    // 3. nothing to wait 

Answer 2

は、私はあなたの代わりに、forループの再帰的な方法でそれを行うことができると思います。 this-

$("#imgSpinner").show(); 
someFunction(0,someLength); 

function someFunction(currentSeq,totalIterations) 
{ 
    $.ajax({ 
      url: URL, 
      type: 'POST', 
      contentType: 'application/json; charset=utf-8', 
      success: function (result) { 
        if (currentSeq<totalIterations) 
         someFunction(currentSeq++,totalIterations); 
        else 
         $("#imgSpinner").hide(); 
      }, 
      error: function (error) { 
       //handle error 

      } 
    }); 

} 

Answer 3

フォームとフィールドを作成するためのループを作成する方法を理解しようとしていますが、フォームにはすべて同じフィールドが含まれていますか？つまり、複数の電子メールアドレスまたは何か？

設計を理解せず、私はそれが次のデータを提出終了したときに、その後いくつかのデータを提出するの一例として、あなたにこれを与えるでしょう。

$.when(AjaxSubmitFirstData.call()).done(function (data) { 
    $.when(AjaxSubmitSecondData.call()).done(function (data) { 
    // finished 
    }); 
}); 

var AjaxSubmitFirstData = { 
    call: function() { 
    return $.ajax({ 
     url: url, 
     type: 'POST', 
     data: "{}", 
     contentType: 'application/json; charset=utf-8', 
    }).done(function (data) { 
    }).fail(function (jq, textStatus) { 
    }); 
    } 
}; 

var AjaxSubmitSecondData = { 
    call: function() { 
    return $.ajax({ 
     url: url, 
     type: 'POST', 
     data: "{}", 
     contentType: 'application/json; charset=utf-8', 
    }).done(function (data) { 
    }).fail(function (jq, textStatus) { 
    }); 
    } 
};