仅当一系列流程通过时才使用jQuery延迟提交表单

Question

首先，我承认获得延迟管道 API 是最近对我来说最具挑战性的事情。

要求

如果一系列检查通过，我想提交一份表格。

• 其中一些是具有同步客户端验证的函数，而另一些则是执行 AJAX 调用的异步检查。异步函数返回一个布尔回调值。

• 同步和异步函数都可能有confirm() 提示以接受用户输入。用户输入将决定是否执行下一个块（如果用户选择取消确认对话框，则下一个块不应继续），因此不应提交表单。 这很重要。

• 只有在所有单个块都返回（或回调）true 时才应提交表单。

稍后添加 - 异步函数可能在某些条件下包含 ajax 调用，因此在某些用例中，可能无法完成 ajax 调用。

• 在异步函数中，可以在 AJAX 响应处理代码中进行用户确认检查。

以下是我的函数的结构 -

function synchronousMethod()
{
  //some logic
  return (confirm("user input"));
}

function aSynchronousMethod1(callback)
{

   if(condition)
   {
        //ajax call
        callback(bool); //does callback true/false
   }
   else
   {//some use cases may follow this path and not make the AJAX call at all. 
        return true;
   }
}

以下是我对 $.Deferred 的试验之一（可能我做错了）-

$.when( synchronousMethod(), aSynchronousMethod1(),aSynchronousMethod2())
.done(function() {
    //I want to submit my form if all the functions returned/called-back true
    console.log("submitting form");
})
.fail(function() {
    console.log( 'I fire if one or more requests failed.' );
});

但是文本“提交表单”在异步函数完成之前执行，并且anychronous函数也会导致这个错误TypeError: callback is not a function。

我观察到，如果我不在 $.when 内的函数调用之后加上方括号，即如果我保持这样 -

$.when( synchronousMethod, aSynchronousMethod1,aSynchronousMethod2) 但是没有一个函数执行。

更新

另一种方法

我也尝试过类似的方法，但与第一种方法有类似的问题 -

var promise = defer.pipe(synchronousMethod);
promise = promise.pipe(aSynchronousMethod1); 
promise = promise.pipe(aSynchronousMethod2);
promise = promise.pipe($("form#frmCampaigns").submit());

更新 2 又加了两点——

• 异步函数可能在某些条件下包含 ajax 调用，因此在某些用例中，可能无法完成 ajax 调用。

• 在异步函数内部，可以在 AJAX 响应处理代码中进行用户确认检查。

更新了异步函数的结构 -

function aSynchronousMethod1(callback)
{
        //some sync logic here
    if(condition) /*some condition*/
    {
        //ajax call
        if(ajax sucess response)
        {
             callback((confirm("If user accepts"));
        }
        else
        {
        callback(false);
        }
    }
    else
    {//some use cases may follow this path and not make the AJAX call at all. 
        callback(true);
    }
}

Answer 1

我不确定我是否完全理解您的示例。但我认为问题可能在于，您的异步方法应该返回一个 Promise（如 $.ajax 的返回值）：

function sync() {
    return "something";
}

function async1() {
    return $.ajax("http://www.foo.com");
}

function async2() {
    return $.ajax("http://www.bar.com");
}

$.when(sync(), async1(), async2()).done(function() {
    console.log("success");
}).fail(function() {
    console.log("error");
});

这是一个工作示例：http://jsfiddle.net/CcsQz/

更新

好的，我明白了。也许你可以在你的情况下做这样的事情：

function syncOrAsync(sync, confirm) {

    var deferred = jQuery.Deferred()

    if (sync) {
        deferred.resolve();
    } else {
        $.ajax('http://www.foo.com').done(function(data) {
            if (confirm(data)) {
                deferred.resolve();
            } else {
                deferred.reject();
            }
        }).fail(function() {
            deferred.reject();
        });
    }

    return deferred.promise();
}

var confirm = function(data) {
    // check confirmation here

    return true;
}

var method1 = syncOrAsync(true, confirm);
var method2 = syncOrAsync(false, confirm);

$.when(method1, method2).done(function() {
    console.log('done');
}).fail(function() {
    console.log('fail');
});

更新小提琴：http://jsfiddle.net/mKdwN/