Why does an Ajax $.get() function call to get data occur out of order?

Question

I have the following JavaScript code where I'm trying to get some data from an action in a WebAPI project. The problem I'm having is that when I go to use the dataset variable, I get an error saying that dataset is undefined. Also, I would expect my alert No. 1 to fire first, but the alert No. 2 fires first, with the dataset as undefined, then the alert No. 2 fires, and it then contains my data. What am I doing wrong here?

<script type="text/javascript">
    $().ready(function() {
        var dataset;
        $.get("http://localhost:9619/api/values", function(data) {
            dataset = data;
            alert("No. 1 " + dataset);
        });

        alert("No. 2 " + dataset);
    });
</script>

This is due to the asynchronous nature of AJAX. There are a couple of million posts here on SO addressing this. — Joseph Silber, Jan 15 '13 at 17:14
possible duplicate of [How do you make javascript code execute \*in order\*](http://stackoverflow.com/questions/2637626/how-do-you-make-javascript-code-execute-in-order) — Joseph Silber, Jan 15 '13 at 17:16

score 1 · Accepted Answer · answered Jan 15 '13 at 17:15

$.get() is asynchronous. So the execution of the callback is delayed until the request has finished.

The execution order in your case is something like this:

1. start the get request
2. alert( "No. 2 " );
3. [request has finished] execute the callback:  alert( "No. 1 " );

You should add all code reliant on the $.get() request to the respective callback. That way you make sure the request has succeed and your variables are set.

Another less preferable solution would be to use $.ajax() and set its async parameter to false. But in that case, the execution of all JavaScript code waits until your request finishes and your page freezes in the mean time.

Minko Gechev · Answer 2 · 2013-01-15T17:23:20.430

Alert No. 2 should fire first with value undefined, because the ajax request is asynchronous. After that you should get alert No. 1 with the value received from the request. You can get the behavior you expect by using synchronous ajax request (bad practice).

Try this:

$().ready(function() {
    var dataset;
    $.ajax({
         url: 'http://localhost:9619/api/values', 
         success: function(result) {
                   dataset = data;
                   alert("No. 1 " + dataset);
                },
         async: false
    });
    alert("No. 2 " + dataset);
});

for synchronous request.

score 0 · Answer 3 · answered Jan 15 '13 at 17:17

$.get is "asynchronous", in that it doesn't wait for it to finish before continuing. The second argument is the callback function (that's where you've put the

alert("No. 1 " + dataset);

What happens is that when you run

$.get("http://localhost:9619/api/values", function(data)

It immediately goes onto the next line:

alert("No. 2 " + dataset);

And then when the AJAX call is complete, it will run the callback function which runs

dataset = data;
alert("No. 1 " + dataset);

Here's a pretty good presentation on asynchronous javascript: Writing Asynchronous Javascript 101

score 0 · Answer 4 · answered Jan 15 '13 at 17:18

Since the $.get() is an asynchronous call it is getting fired as soon as the control reaches there and since it is asynchronous in nature, it does not need to wait to complete the call. so the control shifts to your next alert (and the ajax call might still be on its way to completion).

Why does an Ajax $.get() function call to get data occur out of order?

4 Answers4