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

如果答案是使用promises，那么我也希望看到如何在循环进行时合并一些代码以显示“加载”微调器，然后在我们离开循环后移除微调器。

谢谢！

Answer 1

我认为你可以用递归的方式而不是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 2

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

jQuery顺序执行异步事件

3 个答案: