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循環。像特別是如果你想鏈他們這個 -

$("#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

我想了解如何有一個for-loop創建表單和字段......所有你的表單都包含相同的字段嗎？即多個電子郵件地址或什麼？

如果不理解設計，我會以此爲例提交一些數據，然後提交下一個數據。

$.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) { 
    }); 
    } 
};