How do I do a jQuery blocking AJAX call without async = false?

Question

I have a page which does AJAX validation of an email before continuing on to the next page, using the HTML5 setCustomValidity() method [using the webshims library for older browsers].

For this to work, I set the async option to false in the $.ajax() call to make it synchronous, blocking the page pending the AJAX response, as otherwise the form submits before the ajax call returns, rendering the validation ineffectual.

<script>
  function validateEmailRegistered(input) {
    if (input.setCustomValidity === undefined) return;
    var err = 'Email address not found';
    $.ajax({
      url: 'email-is-registered.php', 
      data: { email: input.value }, 
      async: false, 
      success: function(data) {
        var ok = data=='true';
        input.setCustomValidity(ok ? '' : err)
      }
    });
  }
</script>

<form method="get" action="nextpage.php">
  <input name="email" id="email" type="email" required
    onChange="validateEmailRegistered(this)">
  <button type="submit">go</button>
<form>

I see that the async option is to be deprecated as of jQuery 1.8.

How can I achieve this blocking action without the async option?

Answer 1

http://bugs.jquery.com/ticket/11013#comment:40

The use of the Deferred/Promise functionality in synchronous ajax requests has been deprecated in 1.8. The $.ajax method with async: false is supported but you must use a callback parameter rather than a Promise method such as .then or .done.

So, if you are using the success/complete/error handlers, you can still use async:false. More info at the jquery ticket above.

Answer 2

As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the complete/success/error callbacks.

http://api.jquery.com/jQuery.ajax/ (async section)

I found this a bit annoying... developers should be given the choice to make a blocking call with async: false if its something the platform allows - why restrict it? I'd just set a timeout to minimize the impact of a hang.

Nonetheless, I'm using a queue now in 1.8, which is non-blocking, and works quite nicely. Sebastien Roch created a easy to use utility that allows you to queue up functions and run/pause them. https://github.com/mjward/Jquery-Async-queue

    queue = new $.AsyncQueue();
    queue.add(function (queue) { ajaxCall1(queue); });
    queue.add(function (queue) { ajaxCall2(queue); });
    queue.add(function() { ajaxCall3() });
    queue.run();

In the first 2 functions I pass the queue object into the calls, here's what the calls would look like:

function ajaxCall1(queue) {
    queue.pause();
    $.ajax({
       // your parameters ....
       complete: function() {
         // your completing steps
         queue.run();
       }
    });
}

// similar for ajaxCall2

Notice the queue.pause(); at the beginning of each function, and queue.run() to continue queue execution at the end of your complete statement.