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?
});
});
精彩评论