jquery - Scoping Out the Javascript Function Scope Problem

It's very clear I don't understand how functions are scoped in Javascript. Here's the latest example:

function riseData() { 
    var jsonResult;
    $.ajax({
        success: function(data, textStatus, jqXHR){
            jsonResult = jqXHR.responseText;
            alert("Inside: " + jsonResult);
        },          
        error: function (jqXHR, textStatus, errorThrown) {  
            $('#errLog').append('
Status: ' + qXHR.statusText);                  
        }

    });
    return jsonResult;
}

$(document).ready(function(){
    var intervalID = setInterval('UTCclock()',100); 
    alert("Outside: " + riseData());                            
});

When I execute this, the "Inside" alert functions properly, but the "Outside" alert displays "undefined", even though riseData() is obviously defined only a few lines earlier. There is a $.ajaxSetup earlier in the code which defines the parameters for the ajax call. The ajax call successfully returns the requested data in the "Inside" alert.

I just haven't the slightest clue how to make the necessary data (jqXHR.responseText) available to other parts of the script.

Can anyone point me at a "Javascript Scoping for Dummies" how-to that addresses this issue?

Answer

Your example is scoped just fine. Your problem is you don't understand the implications of how JavaScript is mainly asynchronous.

Let me go through your example to show you.

1. Your document ready handler runs.


2. It calls riseData.


3. riseData declares a variable, jsonResult.


4. riseData calls $.ajax, which schedules an AJAX request to be done, but the response will happen later.


5. Since $.ajax is usually non-blocking/asynchronous, riseData continues and returns jsonResult. Since jsonResult has not been assigned yet because the AJAX request has not completed, the default value of undefined is returned.


6. In the document ready handler, you end up with alert("Outside: "+undefined);.

An event loop to a few milliseconds later, this happens:

1. The AJAX request is completed. jQuery forwards this on to your callback.


2. jsonResult is set, but riseData has already returned.


3. The alert inside riseData alerts with the new data, after the document ready handler has already alerted undefined.

There are two solutions to this problem. The first solution is simple, but often results in a worse user experience. This solution is to add the async: false option to $.ajax. This makes $.ajax block and freeze the browser.

The second solution is to adopt an asynchronous style for almost everything. That means making riseData accept a callback and calling it inside the AJAX response handler. Here's your code transformed with this method:

function riseData(callback) { 
    $.ajax({
        success: function(data, textStatus, jqXHR){
            var jsonResult = jqXHR.responseText;
            alert("Inside: " + jsonResult);
            callback(jsonResult);
        },          
        error: function (jqXHR, textStatus, errorThrown) {  
            $('#errLog').append('
Status: ' + qXHR.statusText);                  

        }
    });
}

$(document).ready(function(){
    //var intervalID = setInterval('UTCclock()',100); 
    // Unrelated, but it's better to pass a
    // function into setInterval than a string.
    var intervalID = setInterval(UTCclock, 100);
    riseData(function(jsonResult) {

        alert("Outside: " + jsonResult);
    });
});