Question

I’ve an ajax registration form. The user may type in the desired username in the input field and then immediately hit the register button, while the ajax request to check if the username is available or not wasn’t completed. For this case I want the actions of the register button to start executing only if the ajax request to check username is complete, otherwise wait for it to complete and then proceed. How to do this?

I want the username validation function to remain asynchronous because it executes every time the user does a key-up on the input field.

One way is to enter into a setTimeout() loop when the register button is clicked, and to stay in it until the flag is good. Another way is to call a synch username check request if the asynch request isn’t complete. Is there a better method?

It’ll be nice if you give answer without using jQuery.

Answer 1

Don’t use setTimeout for this.

Simply use the callback capabilities of jquery’s ajax : execute your “after” code in the success callback or the new done helper :

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

EDIT :

Without jquery, and without immediate triggering :

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();

And when the “register” button is clicked, you just have to check requestDoneAndOK and if it’s true call your other function.

EDIT 2 :

Code is executed as soon as 2 conditions are realized : answer received and register button clicked.

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();
};