Question

我目前正在验证客户端的一些输入。当用户提交表单时，我想检查表单输入的值，然后在完成所有检查后执行某些操作

$('form').submit(function() {
    var input1 = $('form #input1');
    var input2 = $('form #input2');

    //validate both input values
    validate_input(input1);
    validate_input(input2);

    //wait until all validation complete to execute code here

    return false;
});

这里，＆＃34; validate_input＆＃34;函数将检查输入值。如果它通过了初始检查（例如字符长度），那么它将发出AJAX请求以进一步验证（例如，检查是否采用了用户名）。像这样：

function validate_input(input){
    value=input.val();
    if (value.length<4){
        //code to execute if input is too short
    }
    else {
        $.ajax({             
            type: 'get',
            url: check_input_url,
            data: input.serialize(),
            success: function(data){
                if (data=="invalid") {
                    //code to execute if invalid
                } else {
                    //code to execute if valid
                }
            }
        });
    }
}

我目前正在使用jQuery.when（）和.done（）函数，但done（）函数不会等到所有validate_input函数完全完成（包括从validate_input调用的AJAX回调）

$.when(
    validate_input(input1),
    validate_input(input2)
).done(function(){
    //code here
});

在执行更多代码之前，我将如何等待所有validate_input函数完成（完成任何可能的AJAX回调）？

Answer 1

我没有看到你validate_input函数返回任何内容。如果您想等待，则需要返回一个承诺，这样您就不会将undefined传递给$.when()：

function validate_input(input){
    var value=input.val();
    if (value.length<4){
        return …; //code to execute if input is too short
    } else {
        return $.ajax({
 //     ^^^^^^
            …
        });
    }
}

Answer 2

var inputsLength = 0, // or maybe set it to $('form input').length
    inputsReady = 0;
function checkInputsValidation(){
    if (++inputsReady === inputsLength) YOURSALLINPUTSAREVALIDFUNCTION();
}
function validate_input(input){
    inputsLength++; // remove it if you already set inputsLength
    // blablabla
    $.ajax({             
        type: 'get',
        url: check_input_url,
        data: input.serialize(),
        success: function(data){
            if (data=="invalid") {
                //code to execute if invalid
            } else {
                checkInputsValidation();
            }
        }
    });
}

Answer 3

更新：我刚刚更新了我的回答。现在更有可能满足您的需求。我已经为回调函数添加了一个参数。

使用具有匿名函数的回调并链接它们：

1。为回调函数和回调函数调用添加一个参数：

function validate_input(input, callback){
    value=input.val();
    if (value.length<4){
        //code to execute if input is too short
        callback(false);
    }
    else {
        $.ajax({             
            type: 'get',
            url: check_input_url,
            data: input.serialize(),
            success: function(data){
                if (data=="invalid") {
                    //code to execute if invalid
                    callback(false);
                } else {
                    //code to execute if valid
                    callback(true);
                }
            }
        });
    }
}

2。多次调用您的函数时，请使用匿名函数（在success中$.ajax之后执行 - 请求已被触发）链接它：

$('form').submit(function() {
    var input1 = $('form #input1');
    var input2 = $('form #input2');

    //validate both input values
    validate_input(input1, function(result){
        if(result == true)
        {
             validate_input(input2, function(result){
                 if(result == true)
                 {
                    //wait until all validation complete to execute code here
                 }
                 else
                 {
                    return false;
                 }
             });
        }
        else
        {
            return false;
        }
    });
});

等到在jQuery中完成多个函数，这些函数可能在内部调用或不调用ajax？

3 个答案: