Scoping Out the Javascript Function Scope Problem

Question

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('<br>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?

riseData() is actually returning the value of the var `jsonResult` which is null at the time of return. The problem is your AJAX call — JohnP, May 28 '11 at 06:24

score 5 · Accepted Answer · answered May 28 '11 at 06:22

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.

Your document ready handler runs.
It calls riseData.
riseData declares a variable, jsonResult.
riseData calls $.ajax, which schedules an AJAX request to be done, but the response will happen later.
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.
In the document ready handler, you end up with alert("Outside: "+undefined);.

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

The AJAX request is completed. jQuery forwards this on to your callback.
jsonResult is set, but riseData has already returned.
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('<br>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);
    });
});

AHA !! Thanks. So setting... . asynch: false,[br][br] in the $.axaxSetup() fixed it. — NetFool, May 28 '11 at 07:16
Now all I have to do is master "mini markdown" which seems to change the rules for posting a comment from when you post a post. Inr which adding white space seems impossible. ...anyway, thanks for the help! — NetFool, May 28 '11 at 07:23

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

This is only partially a scope issue. Your ajax call is asynchronous, so the riseData() function returns a value before the ajax call is executed. Try setting your variable outside the method.

var jsonResult;

function riseData() { 

    $.ajax({
...

jsonResult should not only be available in riseData(), but also out. However, you'll still have the issue of exactly when it gets populated.

A link for a little more explanation:

What is the scope of variables in JavaScript?

edited May 23 '17 at 12:17

Community

1
1

answered May 28 '11 at 06:27

There was no scope issue at all. If `$.ajax` was synchronous, it would work just fine. Thus, no scope issue. – icktoofay May 28 '11 at 06:29
and if .ajax is not synchronous there is a scope issue if the value is going to be used elsewhere. isn't synchronous ajax an oxymoron considering asynchronous is in the ancronym. – May 28 '11 at 06:32
It's true that if you consider AJAX to strictly be that acronym, then it's an oxymoron, but many people use AJAX for JSON instead of XML, too... Anyway, the OP is returning `jsonResult` and using the return value of the function. There was no attempted access of `jsonResult` through the name of `jsonResult` outside of `riseData`. – icktoofay May 28 '11 at 06:34
oh, I thought it was implied by asking about getting jsonResult outside of riseData by this sentence, ..."available to other parts of the script." Oh, well, I should stay away from these quick answer types. – May 28 '11 at 06:39

Scoping Out the Javascript Function Scope Problem

2 Answers2