jQuery: Why does $.ajax() not wait for request to complete before returning?

Question

I've just spent 3 hours debugging a bit of code only to find it was caused by me assuming that the execution order of the following code was linear:-

$.ajax( {ajax options} );
console.log('I was assuming this would execute once the ajax request was complete');

This isn't the first time that this has caused me problems and I was just wondering what the reason for this behavior was?

Is it so that any ajax requests don't hold up other script execution that may be unrelated to the ajax request?

Answer 1

Most of the other answers are answering how to deal with this. I'd like to look, very briefly, at why asynchronous is good in this case.

In fact, most in-browser Javascript is asynchronous. Take, for example, this code:

document.getElementById('foo').onclick = function() {
    alert('foo clicked');
};
document.getElementById('bar').onclick = function() {
    alert('bar clicked');
};

Which will run first? You don't know, because of the asynchronicity inherent to the browser model (or in fact most event-driven code). You run code when an event occurs. You set up the document, then wait for the event to happen, and your code could be executed in all kinds of different orders, depending on what events happen first. Javascript code needs to be executed during the whole lifetime of the page, not just when it's first created.

So in general Javascript programming (or at least, Javascript programming beyond the simplest level) is often going to be asynchronous. Furthermore, it makes a great deal of sense for HTTP requests to be asynchronous as well.

First, as you imply in your question, making the code synchronous would block execution. That is to say, you probably don't want to make an animation wait two seconds to start because you're making an HTTP request two lines further up. Server response times can be (a) irregular and (b) slow, so it makes no sense for the design of your application to depend on the speed of your server's response.

Second, and more importantly, your user isn't going to stop using the page because your script is making an AJAX call. Your user doesn't care. Your user probably will care that your normal onscroll behaviour isn't working because your script is currently tied up with an unrelated AJAX request. To tie in with the asynchronous nature of the whole of browser Javascript programming, the vast majority of HTTP calls should be non-blocking, asynchronous.

Answer 2

because ajax is Asynchronous. if you want to execute something on the success of ajax call, use the success event

$.ajax({
  url: 'yourserverpage.php',
  success: function(data) {

    alert('This will be executed only when ajax call is success /finished');
  }
});

Asynchronous means ?

Asynchronous I/O, or non-blocking I/O, is a form of input/output processing that permits other processing to continue before the transmission has finished.Asynchronous I/O is used to improve throughput, latency, and/or responsiveness.