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> 以了解表单提交何时完成：

$('.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 回调绑定到循环逻辑。我试图研究延迟/承诺，但并没有真正了解如何在这里正确应用这些概念。

如果答案是使用 Promise，那么我也很想看看如何合并一些代码以在循环进行时显示“加载”微调器，然后在我们退出循环后移除微调器。

谢谢！

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 循环创建表单和字段...所有表单都包含相同的字段吗？即多个电子邮件地址或什么？

在不了解设计的情况下，我将举个例子，提交一些数据，然后在完成提交下一个数据时。

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