javascript - 如何等到异步步骤完成？

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

资源：

• http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/
• http://api.jquery.com/jQuery.when/
• http://api.jquery.com/promise/

Answer 2

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

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

Answer 3

您可以使用 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 调用。

Answer 4

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

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