让代码等待AJAX​​请求完成

Question

我有以下代码来检查用户名是否已经存在。 它使用AJAX请求到另一个页面，该页面返回1（用户名存在）或0（用户名不存在）。

function checkUsername(username,callback){
    $.ajax({
        url: '/check_username.php',
        type: 'post',
        data: {username: username},
        dataType: 'json',
        success : function(data){
            switch(data.response){
                case 0:
                    callback(true);
                break;
                case 1:
                    callback(false);
                break;
            }
        }
    });                 
};

var error;  // 'undefined' for now

checkUsername('abc',function(data){
    if(data == false){
        // username exists
        error = true;
    }else{
        // username does not exist
        error = false;
    };
});

if(error == false){
    alert('username does not exist');
}else{
    alert('username exists');
};

问题

代码检查error = true （是否存在错误，即用户名存在）或error = false ，但代码仍在继续运行。 它不会等到checkUsername的AJAX请求完成。 因此，它始终是 “用户名存在”（因为error = undefined ，然后if-else进入else语句）。

题

我如何确保代码等待AJAX​​请求（ checkUsername函数）完全完成后再继续操作。

我有一个“部分”的解决方案：当我将检查error = true / false的if-else语句包装在setTimeout ，它可以工作。 问题是：多少毫秒？ 我想要尽快。 500ms的？ 如果未完成AJAX响应怎么办？ 1000毫秒？ 那不是很长吗？

我认为有比使用setTimeout更好的解决方案。 有人有主意吗？

Answer 1

if(error == false){
    alert('username does not exist');
}else{
    alert('username exists');
};

当前，您的上述代码位于javascript之上，无论您是否调用ajax，始终都会执行该代码。因此将其放入其他函数中，然后在调用checkUsername（）之后调用它。

function checkUsername(username,callback){
    $.ajax({
        url: '/check_username.php',
        type: 'post',
        data: {username: username},
        dataType: 'json',
        success : function(data){
            switch(data.response){
                case 0:
                    callback(true);
                break;
                case 1:
                    callback(false);
                break;
            }
        }
    });                 
};

var error;  // 'undefined' for now

checkUsername('abc',function(data){
    if(data == false){
        // username exists
        error = true;
    }else{
        // username does not exist
        error = false;
    };
    alertMsg();
});

function alertMsg(){
if(error == false){
    alert('username does not exist');
}else{
    alert('username exists');
}
}

Answer 2

尝试使用async：ajax函数为false

async（默认：true）类型：Boolean默认情况下，所有请求都是异步发送的（即默认情况下设置为true）。 如果需要同步请求，请将此选项设置为false。 跨域请求和dataType：“ jsonp”请求不支持同步操作。 请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。 从jQuery 1.8开始，不建议使用async：false和jqXHR（$ .Deferred）； 您必须使用成功/错误/完成回调选项，而不要使用jqXHR对象的相应方法，例如jqXHR.done（）或已弃用的jqXHR.success（）。

Answer 3

将async设置为FALSE，直到ajax请求完成，它才会移动。

function checkUsername(username,callback){
    $.ajax({
        url: '/check_username.php',
        type: 'post',
        data: {username: username},
        dataType: 'json',
        async : false,
        success : function(data){
            switch(data.response){
                case 0:
                    callback(true);
                break;
                case 1:
                    callback(false);
                break;
            }
        }
    });                 
};

var error;  // 'undefined' for now

checkUsername('abc',function(data){
    if(data == false){
        // username exists
        error = true;
    }else{
        // username does not exist
        error = false;
    };
});

if(error == false){
    alert('username does not exist');
}else{
    alert('username exists');
};

Answer 4

我遇到同样的问题，找不到任何办法，但这对我有用。

function sendAjax(){
var defObj = $.Deferred();
//my ajax code here  
defObj.resolve(ajaxResponse);
return defObj.promise();
}

Answer 5

AJAX（以及JavaScript的许多其他功能）是异步的，这意味着您不必等待事情发生，而评估者会告诉JavaScript当事情发生时该怎么做。 在您的示例中，您尝试等待直到AJAX-Request完成，但是您应该做的是告诉JavaScript在请求完成后执行代码，这意味着将代码放入回调中。

Answer 6

即使您已经为AJAX使用了回调，但检查条件的方式仍然是异步的。

checkUsername('abc',function(data){
    alermsg(data);
});

function alertmsg(data){
  !data?alert('username does not exist'):alert('username exists');
}