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