等待，直到多個函數，可能或可能不會調用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(); 
      } 
     } 
    }); 
}