jQuery - 等到函数返回然后继续

Question

当我更新到 1.10.2 版本时，我开始遇到 jQuery 的一些问题。

我一直在寻找答案，但似乎没有一种方法有效，我可能做错了什么。非常感谢您的帮助。

主要问题是点击事件不等待 validateAjax 的结果，只是说 validateBaan 未定义。我已经检查了 validateAjax 函数并且输出的值是 true 或 false，但我猜到那时点击事件已经继续。我希望点击事件等待 validateAjax 结果然后继续。

点击事件：

$('#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 when/then，但我没有设法让它工作。

我在使用旧 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

将异步设置为 false：

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

这将等到 ajax 命令完成后再限制您的代码。

Answer 3

那是ajax吗，那你可以试试async: false

设置 async to false 意味着您调用的语句必须 在调用函数中的下一条语句之前完成。

自弃用以来，最有效的方法是使用 callback 函数来处理它。