如何等待异步步骤完成？

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回调来管理失败的请求。如果您使用promises，那么您可以在各种场景中使用.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

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

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