如何等到异步步骤完成？答案

【问题标题】：How to wait until the completion of asynchronous steps?如何等到异步步骤完成？
【发布时间】：2013-02-05 22:06:24
【问题描述】：

我有一个表单，我需要在提交之前运行一些验证操作。这些操作涉及异步步骤，例如 ajax 调用。

如何让表单等到所有验证操作完成后再提交？

我的验证函数如下所示（伪代码）：

function preSubmit() {
    // validate field 1
    ajax({
        ...
        onSuccess:...
    });
    // validate field 2
    ajax({
        ...
        onSuccess:...
    });
    // fields 3, 4, etc.
}

我当前的问题是表单在 onSuccess 回调完成之前被提交。

我当然可以使我的 ajax 调用同步，但由于性能影响，我试图避免它。

【问题讨论】：

你在使用 jQuery 吗？如果是这样，请查看$.when
为什么不直接提交表单，让服务器告诉你它是否有效？
@Kolink 节省一趟服务器。在我的情况下，一些验证使用外部服务（例如地址）。

标签： javascript forms validation submit

【解决方案1】：

创建一个“errorMsg”变量并最初将其设置为“等待”，然后让您的 aynchc 代码更新它。

在您的表单提交代码中，检查该字段的值。它还没有“准备好”，不要提交。

【讨论】：

【解决方案2】：

理想情况下，您应该只需要触发一个 ajax 事件。如果您必须包含多个 ajax 事件，您可以使用成功回调函数按顺序（同步）触发异步请求。这是一个例子。

    function preSubmit() {
        $.ajax({
            error: handleError,
            success: stepTwo
        });
    }
    function stepTwo() {
        $.ajax({
            error: handleError,
            success: stepThree
        });
    }

【讨论】：

这是有道理的，但正如我在问题中所说，这不是很有效，因为呼叫需要相互等待。
拥有多个 ajax 调用本身“效率不高”。关于时间效率并假设您要验证的所有字段都是真实的，那么是的，它可能会更快（几毫秒）。但是，请考虑一个或多个字段无效的情况。即使第一个返回无效，您也将触发所有可能的 ajax 事件。我和其他人可能会认为浪费的服务器资源/带宽更多地是对效率的打击，而不仅仅是让用户等待几毫秒。
感谢评论。这不是我现在设置的方式，但我需要重新考虑它。另外，我想通知用户所有验证问题，而不仅仅是返回无效状态。
+1 建议只触发一个 ajax 调用（显然带有多个字段的数据）。

【解决方案3】：

如果您使用的是 jQuery，那么您可能需要考虑 JQuery.Deferred or Promise

当上一个调用完成（成功或失败）时，您调用每个 ajax 请求（或包含该请求的函数）。

如果您使用 $.when，您可以通过 .then 回调来管理失败的请求。如果你使用 Promise，那么你可以在各种场景中使用 .done .fail 和 .always 回调。

$.when($.ajax("...."), $.ajax("...."))
  .then(...);

资源：

【讨论】：

我忘记了我的问题中的一个关键约束（提交操作在 preSubmit 函数之外），在我知道之前，所有回复都朝着不同的方向发展。我将此标记为答案，因为考虑到我提供的信息，它似乎是最合适的。

【解决方案4】：

您可以使用 JavaScript 的设置超时功能。代码会是这样的，

function preSubmit() {
 //set a variable which increments after each Ajax call success.
var successCount=0;
// validate field 1
ajax({
    ...
    onSuccess: function(){
       successCount++; 
    }
});
// validate field 2
ajax({
    ...
     onSuccess: function(){
       successCount++; 
    }
});

  var wait = function(){
      setTimeout(function(){
        // check whether "successCount" is equal to number of validations done
         //here it is 2
        if(successCount==2){
        //call function say,"submitForm" which submit the form
          submitForm();
        }else{
          //All validations are not completed, wait until it completes
          wait();
         }
        },1000);
     }
     wait();
}

这样您可以有效地使用异步 Ajax 调用。

【讨论】：