CODEWITHSUNDEEP
javascript
Kaleem Sajid
Kaleem Sajid

Reputation: 230

Variables inside nested anonymous functions in javascript

Can someone one explain it please?

  1. Why alert 2 pops before alert 1?
  2. Why value of pageCount in alert 1 is different than alert 2?
function naviSet()
{
    var pageCount;
    if($.ajax({
        type: "POST",
        url: "http://localhost/mywebsite/wp-content/themes/twentyeleven/more-projects.php",
        success:function(data)
        {
            pageCount = data;
            alert(pageCount); //alert 1
            return true;
        },
        error:function()
        {
            $("#direction").html("Unable to load projects").show();
            return false;
        }
    })) alert(pageCount); //alert 2
}

Upvotes: 2

Views: 199

Answers (5)

Andreas Köberle
Andreas Köberle

Reputation: 111042

As most answers mention you make an asynchronous call, but thats not really the reason. So JavaScript is single threaded, only on think can be done per time.

So first you call your function and this function will put on the execution context stack. This function will be executed before any other function that will be added to stack can be executed. In this function you make your ajax call and on success the success function will be put on the execution context stack. So this function could never ever called before naviSet. As alert1 is made in the naviSet function it will be the called first.

And to your second question:

From your function I think you believe, when $.ajax() returns true, your ajax call was succesful and pageCount was set to data. But it isn't. $.ajax doesn't return true but the truethy value $. Its a function that return reference to the main jquery object, so you can chain function calls.

function naviSet()

{
    //you create a new var which is undefined
    var pageCount;
    // return $ which is a truethy in JavaScript, but it does not mean the ajax call was successful
    if($.ajax({
        type: "POST",
        url: "http://localhost/mywebsite/wp-content/themes/twentyeleven/more-projects.php",
        success:function(data)
        {
            // now you in the context of your success function 
            // and set the value of your   variable to data
            pageCount = data;
            alert(pageCount); //alert 1
            return true;
        },
        error:function()
        {
            $("#direction").html("Unable to load projects").show();
            return false;
        }

    })) 
    //here you are still in the context of your naviSet function where pageCount is undefined
    alert(pageCount); //alert 2
}

Upvotes: 2

JaredPar
JaredPar

Reputation: 755269

The reason the second alert happens first is because the ajax call is asynchronous. It essentially schedules a web call and returns immediately. Hence the line after it which is the second alert happens directly after.

At some point later in time the web request will complete and call into the success function. Hence the first alert happens at that point

Upvotes: 1

Jakob
Jakob

Reputation: 24370

The ajax-function retrieves data from the given url asynchronously. That means that it is doing it in the background, while the rest of your code executes. As soon as it is finished, the function assigned to "success" is called (or "error", if it fails).

The second alert is called first because of this. Like I said, the rest of the code continues execution while the ajax-function is working.

Upvotes: 1

Rich O'Kelly
Rich O'Kelly

Reputation: 41767

The alert1 is inside a callback - this function will only be called when the ajax request completes successfully (ie asynchronously).

The pageCount is different for the same reason - the success callback has not been made when alert2 is called.

Upvotes: 2

Quentin
Quentin

Reputation: 944175

Why alert 2 pops before alert 1?

Alert 1 is fired by the callback function that is fired when a successful HTTP response has been received.

Alert 2 fires as soon as the HTTP request has been sent.

Networks are slow.

Why value of pageCount in alert 1 is different than alert 2?

Because it is changed when the response has been received (just before it is alerted), by the same callback function as mentioned above.

Upvotes: 1

Related Questions