Javascript 如何等待异步请求完成

我有一张ajax登记表。用户可以在输入字段中输入所需的用户名，然后立即点击注册按钮，同时ajax请求检查用户名是否可用或未完成。对于这种情况，我希望仅当检查用户名的ajax请求完成时，register按钮的操作才开始执行，否则等待它完成，然后继续。如何做到这一点

我希望用户名验证函数保持异步，因为每次用户在输入字段上输入一个键时，它都会执行

一种方法是在单击register按钮时进入setTimeout（）循环，并一直保持到标志良好为止。另一种方法是在异步请求未完成时调用同步用户名检查请求。有更好的方法吗

---

如果您不使用jQuery就给出答案，那就太好了。

不要为此使用setTimeout

只需使用以下回调功能：在

success

回调或新的

done

帮助程序中执行“after”代码：

$.ajax({
  url: "test.html"
}).done(function() { 
  // do things after the answer has been received
});

编辑：

没有jquery，也没有立即触发：

var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
                requestDoneAndOK = true;
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();

单击“注册”按钮时，只需检查

requestDoneAndOK

，如果是真的，则调用其他函数

编辑2:

代码在两个条件实现后立即执行：收到应答并单击注册按钮

var registerClicked = false;
var ajaxAnswerReceived = false;
function check() {
    if (registerClicked && ajaxAnswerReceived) {
         // do the thing !
    }
}
var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
              ajaxAnswerReceived = true;
                check();
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();
document.getElementById('registerButton').onclick = function(){
     registerClicked = true;
     check();
};

---

不要为此使用setTimeout

只需使用以下回调功能：在

success

回调或新的

done

帮助程序中执行“after”代码：

$.ajax({
  url: "test.html"
}).done(function() { 
  // do things after the answer has been received
});

编辑：

没有jquery，也没有立即触发：

var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
                requestDoneAndOK = true;
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();

单击“注册”按钮时，只需检查

requestDoneAndOK

，如果是真的，则调用其他函数

编辑2:

代码在两个条件实现后立即执行：收到应答并单击注册按钮

var registerClicked = false;
var ajaxAnswerReceived = false;
function check() {
    if (registerClicked && ajaxAnswerReceived) {
         // do the thing !
    }
}
var httpRequest = new XMLHttpRequest();
var requestDoneAndOK = false;
httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
              ajaxAnswerReceived = true;
                check();
        }               
    }
};
httpRequest.open('GET', url);
httpRequest.send();
document.getElementById('registerButton').onclick = function(){
     registerClicked = true;
     check();
};

---

如果希望在没有jQuery的情况下执行此操作，则需要使用onreadystatechange使用默认JavaScript调用机制。请记住，jQuery只是默认机制的包装器。我确实建议您使用jQuery或其他方法来防止大量跨浏览器问题和http状态更改逻辑

---

阅读所有关于本机的内容：

如果您想在不使用jQuery的情况下执行此操作，则需要使用onreadystatechange的默认JavaScript调用机制。请记住，jQuery只是默认机制的包装器。我确实建议您使用jQuery或其他方法来防止大量跨浏览器问题和http状态更改逻辑

---

阅读此处的所有本机内容：

您需要使用回调和存储验证标志布尔值，然后在用户提交注册页面之前需要检查这些布尔值。这是一个jquery实现，但将其转换为常规js并不困难。方法定义如下：

var goodUsername = false;

// keyup handler, pseudo code 
$('#username').keyup(function(event) { 
    // perform the username validation with an ajax call:
    $.ajax({
        url: "validateUsername.php"
    }).done(function(data) {
        // set the goodUsername if its good or not
        if (data.usernameIsGood)
            goodUserName = true;
    });
});

// submit the registration form only if the username has been checked and is good
$('#registrationFormButton').click(function(event){
     if (goodUsername)
         return true; // allows the browser to submit the form
     else
         return false;
});

---

您需要使用回调和存储验证标志布尔值，然后在用户提交注册页面之前需要检查这些布尔值。这是一个jquery实现，但将其转换为常规js并不困难。方法定义如下：

var goodUsername = false;

// keyup handler, pseudo code 
$('#username').keyup(function(event) { 
    // perform the username validation with an ajax call:
    $.ajax({
        url: "validateUsername.php"
    }).done(function(data) {
        // set the goodUsername if its good or not
        if (data.usernameIsGood)
            goodUserName = true;
    });
});

// submit the registration form only if the username has been checked and is good
$('#registrationFormButton').click(function(event){
     if (goodUsername)
         return true; // allows the browser to submit the form
     else
         return false;
});

---

---

这是在jQuery中很容易做到的。这件事你能接受吗？您可以使用success回调来实现这一点。我更喜欢一个概念性的解释，而不是jQuery。我不知道jQuery。呃。。。因此，在验证用户名之前，您需要禁用register按钮，对吗？这在jQuery中非常容易做到。这件事你能接受吗？您可以使用success回调来实现这一点。我更喜欢一个概念性的解释，而不是jQuery。我不知道jQuery。呃。。。因此，在验证用户名之前，您需要禁用register按钮，对吗？您的回答是正确的，但user1444680表示他更喜欢没有jQuery的解决方案。我不知道jQuery，但我可以理解的是，当ajax请求完成时，我的函数将自动触发。我不想那样。我希望它们在点击“注册”按钮时触发。单击后，将检查在单击之前发出的ajax请求是否完成。@koenp OOps。我把问题的最后一行读得太快了。。。我知道OP特别想要jquery…@user1444680编辑，没有jquery，也没有立即的回调执行。我知道这一点。但是如果requestDoneAndOk是假的呢？我希望javascript等到它成为现实。这就是我的问题所在。如何等待它成为现实？您的答案是正确的，但user1444680表示他更喜欢不使用jQuery的解决方案。我不知道jQuery，但我可以理解的是，当ajax请求完成时，我的函数将自动触发。我不想那样。我希望它们在点击“注册”按钮时触发。单击后，将检查在单击之前发出的ajax请求是否完成。@koenp OOps。我把问题的最后一行读得太快了。。。我知道OP特别想要jquery…@user1444680编辑，没有jquery，也没有立即的回调执行。我知道这一点。但是如果requestDoneAndOk是假的呢？我希望javascript等到它成为现实。这就是我的问题所在。如何等待它变为真？“if（goodUsername）return true；//允许浏览器提交表单，否则返回false；”我不想返回false，我希望它等待它变为真。该特定函数允许提交表单。当返回true时，单击事件将传递给浏览器，浏览器将提交表单。如果您在此处返回false（因为用户名不正确），则浏览器不会看到单击事件，也不会提交表单。因此异步