Javascript 如何等待异步步骤完成？

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

如何告知表单在提交之前等待所有验证操作完成

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

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

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

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

---

在表单提交代码中，检查字段的值。还没准备好，不要屈服

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

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

---

如果您使用jQuery，那么您可能需要考虑<代码> jQuery。 当上一次调用完成（成功或失败）时，您可以调用每个ajax请求（或包含该请求的函数）

如果您使用$。当您可以通过

管理失败的请求时，

回调。如果使用承诺，则可以在各种情况下使用

.done

.fail

和

回调

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

资源：





您可以使用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调用。
您使用的是jQuery吗？如果是，请查看
$。当
提交表单时，为什么不让服务器告诉您表单是否有效？@Kolink可将一次行程保存到服务器。在我的例子中，一些验证使用外部服务（例如address）。这是有道理的，但正如我在问题中所说的，这不是很有效，因为调用需要相互等待。拥有多个ajax调用本身“不是很有效”。关于时间方面的效率，假设所有要验证的字段都是真的，那么是的，它可能会更快（几毫秒）。但是，考虑当一个或多个字段无效时的情况。您将触发所有可能的ajax事件，即使第一个事件返回无效。我和其他人可能会认为浪费的服务器资源/带宽远比仅仅让用户等待几毫秒的效率要大得多。这不是我现在的安排方式，但我需要重新考虑。另外，我想通知用户所有的验证问题，而不仅仅是返回一个无效状态。+1表示建议只触发一个ajax调用（显然是多个字段的数据）。我忘记了问题中的一个关键约束（submit操作在preSubmit函数之外）在我意识到这一点之前，所有的回答都指向了不同的方向。考虑到我提供的信息，我认为这是最合适的答案。
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();
}