等到多个函数（可能会或可能不会在内部调用 ajax）在 jQuery 中完成？答案

【问题标题】：Wait until multiple functions, which may or may not call ajax internally, are complete in jQuery?等到多个函数（可能会或可能不会在内部调用 ajax）在 jQuery 中完成？
【发布时间】：2014-09-03 18:24:53
【问题描述】：

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

$('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;
});

这里，“validate_input”函数将检查输入值。如果它通过了初始检查（例如字符长度），那么它将发出 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 回调），然后再执行进一步的代码？

【问题讨论】：

标签： javascript jquery ajax jquery-deferred

【解决方案1】：

我没有看到你 validate_input 函数返回任何东西。如果你想等待，你需要返回一个promise，这样你就不会将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({
 //     ^^^^^^
            …
        });
    }
}

【讨论】：

就是这样，我没有返回 ajax 对象！

【解决方案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();
            }
        }
    });
}

【讨论】：

【解决方案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.当多次调用你的函数时，用匿名函数链接它（在你的$.ajax-request 被触发后执行success）：

$('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;
        }
    });
});

【讨论】：