"Waiting" for ReadyState to be 4 before returning a value

I开发者_StackOverflow中文版 have looked in lots of places for this, and I'm probably being an idiot because this is done a lot, but here's my situation.

I am trying to display a checkbox next to an e-mail field on my website iff the e-mail has not been used to register already.

What I have is something like this:

$('[name=reg_email]').change( function() { 
    if(!emailUsed()) {
        //Update image to be a green checkmark
    } else {
        //Update image to be a huge red X
    }
}

And my "emailUsed" function should be returning a Javascript boolean variable depending on whether or not the e-mail address is in the database. To facilitate this, I've created a script which will determine if it's there or not. So the emailUsed() function just needs to call the script and return, but I need to wait until readystate == 4 before I return, and all of the methods I have found for waiting for readystate to equal 4 prevent me from returning a value at all:

function emailUsed() {
    var req = $.get('scripts/email_used.php?email='+$('[name=reg_email]').val());

    //Wait for req.readystate to be 4

    return req.responseText == 'True';
}

But nowhere can I find something that explains how to do this and still return a value. Everything seems to use callback functions and this and that, but I can't get THIS method to return a value.

Help, please!

Doing a busy wait for req.readyState === 4 is considered bad design practice. You're tying up the UI thread and preventing the browser from updating. If the server is slow enough to respond, the user will get prompted whether to cancel further processing.

If you take a look at $.get(), it takes a completion function as one of its arguments. You should perform your success/failure logic in this function. You can do this by disabling your Submit button until you get back a success message.

You're missing the point of asynchronous methods. The main point is that there is some calculation to be done, and you don't want to tie up the current thread waiting for that calculation. Therefore, long running methods should not return a value, but instead they should provide a callback that will be passed the status of the call, without making the entire app wait.

I would suggest the following

function emailUsed (callback) {
  var req = $.get('scripts/email_used.php?email='+$('[name=reg_email]').val(),
      function(data) {
          callback(data == 'True');
      }
  );
}

$('[name=reg_email]').change( function() { 
    emailUsed(function(isUsed){
        if (isUsed) {
          //Update image to be a green checkmark
        } else {
          //Update image to be a huge red X
        }
    });
}