javascript - 让代码等待 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，有效。问题是:多少毫秒？我想尽快拥有它。 500毫秒？如果 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');
}
}