等待，直到多个函数，可能或可能不会调用Ajax内部完成jQuery？

Question

我目前正在验证一些输入clientside。当用户提交表单，我要检查的值的形式输入，然后做一些事情，一旦所有的检查完成

$('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（）函数，但做（）函数不等到所有的validate_input功能完全完成（包括AJAX回调，从所谓的validate_input）

$.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

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

使用回调与匿名函数并把它们连：

添加回调函数中的参数和回调函数调用：

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; 
     } 
    }); 
}); 

Answer 3

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