jQuery - 等到函數返回，然後繼續

Question

當我更新到版本1.10.2時，我開始有一些jQuery問題。

我一直在尋找答案，但沒有一種方法似乎工作，我可能做錯了什麼。我真的很感謝一些幫助。

主要問題是click事件不會等待validateAjax的結果，而只是說validateBaan是未定義的。我已經檢查了validateAjax函數並且輸出獲取了true或者false的值，但是我估計那時點擊事件已經移動了。我希望click事件等待validateAjax結果，然後繼續。

Click事件：

$('#log-in').on('click', function() { 

    // triggers validateAjax 
    var validateBaan = validateAjax('fieldId', 'worker'); 

    // every time I log it says undefined, even though it gets value 
    // (true or false), but too late 
    // console.log(validateBaan); 

    // this function works 
    var validateShift = checkInput({ 
     shift: { 
      field: 'btn-group', 
      hasClass: 'active', 
      error: 'shifterror' 
     } 
    }); 
    // when both are true take some action 
    if (validateBaan && validateShift) { 
     ... 
    } 
}); 

這裏是validateAjax功能：

function validateAjax(fieldId, query) { 

    var output; 

    // field value 
    var fieldValue = $('#' + fieldId).val(); 

    // sending ajax request 
    var ajaxQuery = $.ajax({ 
    type: "GET", 
    url: "update.php", 
    data: 'checkup=checkup&baan=' + fieldValue 
    }); 

    // based on the response, takes action 
    ajaxQuery.done(function(response) { 
     if (response.error) { 
      output = false; 
      $('.error-' + fieldId).html(response.error); 
     } else if (response.product) { 
      $.cookie('tab_name', response.product); 
      output = true; 
     } else { 
      output = true; 
     } 
     return output; 
    }); 
} 

我已經使用jQuery的時候/然後試過，但我沒能得到它的工作。

我從來沒有像這樣的老問題jQuery版本的問題，所以我將不勝感激所有幫助。

Answer 1

您可以使用回撥功能，如

$('#log-in').on('click', function() { 

    // triggers validateAjax 
    // pass anonymus function to be called when ajax is complete 
    var validateBaan = validateAjax('fieldId', 'worker', function(){ 

     // every time I log it says undefined, even though it gets value 
     // (true or false), but too late 
     // console.log(validateBaan); 

     // this function works 
     var validateShift = checkInput({ 
      shift: { 
       field: 'btn-group', 
       hasClass: 'active', 
       error: 'shifterror' 
      } 
     }); 
     // when both are true take some action 
     if (validateShift) { 
      ... 
     } 
    }); 
}); 


function validateAjax(fieldId, query, callback) { 
    var output; 

    // field value 
    var fieldValue = $('#' + fieldId).val(); 

    // sending ajax request 
    var ajaxQuery = $.ajax({ 
    type: "GET", 
    url: "update.php", 
    data: 'checkup=checkup&baan=' + fieldValue 
    }); 

    // based on the response, takes action 
    ajaxQuery.done(function(response) { 
     if (response.error) { 
      output = false; 
      $('.error-' + fieldId).html(response.error); 
     } else if (response.product) { 
      $.cookie('tab_name', response.product); 

      //Call you function if condition is trure 
      callback(); 
     } 
    }); 
} 

Answer 2

是，一個AJAX，那麼你可以嘗試使用async: false

設置async to false指聲明你正在呼籲有 完全在你的函數的下一條語句可以被稱爲前。

由於過時，最有效的方法是使用callback函數來處理它。

Answer 3

異步設置爲false：

var ajaxQuery = $.ajax({ 
async: false, 
type: "GET", 
url: "update.php", 
data: 'checkup=checkup&baan=' + fieldValue 
}); 

這將等到AJAX命令與你的代碼前圍完成。