2

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?

Improve this question
1
  • riseData() is actually returning the value of the var jsonResult which is null at the time of return. The problem is your AJAX call Commented May 28, 2011 at 6:24

2 Answers 2

Reset to default
5

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('<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);
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

AHA !! Thanks. So setting... . asynch: false,[br][br] in the $.axaxSetup() fixed it.
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!
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?

Improve this answer

4 Comments

There was no scope issue at all. If $.ajax was synchronous, it would work just fine. Thus, no scope issue.
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.
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.
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.