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请求（或包含请求的函数）。

如果使用$。，则可以通过.then回调管理失败的请求。如果您使用promises，那么您可以在各种情况下使用.done .fail和.always回调。

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

资源：

Answer 2

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

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

Answer 3

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

在表单提交代码中，检查字段的值。这不是“准备好”，不要提交。

Answer 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调用。

如何等到异步步骤完成？

4 个答案: