javascript - 如何等待异步请求完成

Question

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

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

一种方法是在单击注册按钮时进入 setTimeout() 循环，并保持在其中直到标志良好。另一种方法是，如果异步请求未完成，则调用同步用户名检查请求。有更好的方法吗？

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

Answer 1

不要为此使用 setTimeout。

只需使用 jquery's ajax 的回调功能即可:在 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 ，如果为 true，则调用您的其他函数。

编辑2:

一旦满足 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();
};