jQuery $.ajax success firing last

Question

I have the following Javascript and it's returning results out of the order I would expect them.

function getCurrentItems(id){
    alert("2");
    $.ajax({
        url: "somePHPurlthatspitsoutajsonencodedArray.php",
        type: "POST",
        dataType: "json'",
        data: {id:id},
        success: function(data){
            alert("3");
        }
    });
    alert("4");
}

$(document).on('click', '.eventClass', function(e){
    alert("1");
    var id = "someID";
    var results = getCurrentItems(id);
    alert("5");
});

I would think I'd get alerts in the order of 1, 2, 3, 4, 5.

Instead I get them in the order of 1, 2, 4, 5, 3.

I just can't figure out why that success alert (5) fires last?

Answer 1

AJAX is short for asynchronous JavaScript and XML. Asynchronous is the keyword here. I'll use an allegory to explain async.

Lets say you're washing dishes manually. You can't do anything else while doing that, so it is synchronous.

Lets say you put your dishes in a dishwasher. You can do other things, you've delegated the task to the dishwasher, so this is asynchronous. Asynchronous is generally better, because you can do multiple things at one time. Javascript only asyncs when requesting info from the server, as Javascript is single threaded (it only runs on 1 CPU core and can only do one thing at a time on it's own).

A callback is a function that is called when the async task completes. The dishwasher finishes, so now you have to empty it as soon as you complete what you're doing when it finshed.

So in your code, you start the dishwasher, say you're going to alert("3") when the dishwasher finishes running, and then you go alert 4 and 5. Then when the dishwasher finishes/your server returns data, you alert 3 like you said you would.

That make sense?

Answer 2

The reason that you give a success callback function in an ajax request is that the request might take some time to return, but your code can continue running. In this case the ajax request is sent, and the success function is remembered for later, then your code continues (alerting 4 and 5). When the browser receives the response to the ajax request it calls the success function (alerting 3).

The way that Javascript works, only one thread is run per browser tab, so event handlers are not called until any previously running code is completed. Therefore, even if your getCurrentItems function were to take several seconds to complete, by which time the server response had returned, the success function would still not be called until after your function had completed.

Edit: Because an ajax call can take some time, it is not generally desirable to be able to call a function like getCurrentItems which includes an ajax request, and wait for the response. If you do this, then you are likely to leave your browser window unresponsive, and you will have to deal with potential errors from the ajax call. Instead, you should put any code that you wish to run which relies on the ajax result in the success function, or in another function which you call from there. As languages go, Javascript is very good for doing this kind of thing. You could even take a callback function as an argument to getCurrentItems, and run it from the success function.

Answer 3

As others have mentioned, you're getting the results in the order you see because the ajax request doesn't return with it's data and call your success callback until the response is received, but code continues to execute immediately after the $.ajax call.

To get the workflow you're probably expecting, you could use promises, or simply pass in a callback:

function getCurrentItems(id, onSuccess){
    alert("2");
    $.ajax({
        url: "somePHPurlthatspitsoutajsonencodedArray.php",
        type: "POST",
        dataType: "json'",
        data: {id:id},
        success: function(data){
            alert("3");
            onSuccess(data);
        }
    });
    alert("4");
}

$(document).on('click', '.eventClass', function(e){
    alert("1");
    var id = "someID";
    var results = getCurrentItems(id, function(data){
       console.log('data',data);
       alert("5");
    });

});