Scope of variables inside of javascript

I have the following code sample that im trying to wrap my head around

        $(document).ready(function () {

        test("load json", function () {

            length = 0; // length = 0

            $.getJSON("plugins/form.json", function (data) {
                length = data.fields.length; // length = 4
         开发者_StackOverflow社区   });

            ok(length == 4, "length = " + length.toString()); // length = 0? wtf?
        });
    });

the 'length' variable does not persist when the $.getJSON runs. I cant figure out if its because its asynchronous or because the variable is out of scope.

If the getJSON method is running asynchronously, then the ok(... line will likely execute before the getJSON returns...thus length will always be 0...

could you not do this...

$.getJSON("plugins/form.json", function (data) {  
   var somelength = data.fields.length;  
   ok(somelength == 4, "length = " + somelength.tostring());  
});

that way it calls the ok function once the getJSON has returned with data...

You should make an asynchronous test, and since you are using QUnit, you can use the stop method, make your assertions on the getJSON callback, and then resume the following tests:

$(document).ready(function () {

    test("load json", function () {
        stop();

        $.getJSON("plugins/form.json", function (data) {
            var length = data.fields.length;
            ok(length == 4, "length == " + length);
            start(); // resume tests
        });
    });
});

Or you can use the asyncTest method instead of test, which will implicitly make a call to stop:

//...
asyncTest("load json", function () {

    $.getJSON("plugins/form.json", function (data) {
        var length = data.fields.length;
        strictEqual(length, 4, "length"); 
        //...
        start(); // resume tests
    });
});
//...

Check a live example here and give a look to the source code here.

Its not because of scope issue, but because of this line run first

ok(length == 4, "length = " + length.toString());

before callback function from JSON

function (data) {
    length = data.fields.length; // length = 4
}

You need to put ok(length == 4, "length = " + length.toString()); function inside callback function of $.getJSON.

Yes, that would be because it's asynchronous.

test("load json", function () {

     // executes first

     $.getJSON("plugins/form.json", function (data) {

         // executes last (that is, "sometime later")

     });

     // executes second

});

Also, you should declare the variable as var length the first time, unless you want it to be global.

Try this - $(document).ready(function () {

var length = 0; // length = 0
    test("load json", function () {

        $.getJSON("plugins/form.json", function (data) {
            length = data.fields.length; // length = 4
        });

        ok(length == 4, "length = " + length.toString()); // length = 0? wtf?
    });
});