javascript only execute after set breakpoint in firebug

Question

I have a program.

$(document).ready(function(){
    var tmpArray = [];
    var x;
    var y;
    $.plot($("#chart"), [ tmpArray]);   
    $.getJSON("111.json", function(data) {
        var i = 0, dataSize = data.length;
        for(i; i < dataSize; i++){
            var x = parseFloat(data[i].Time.substring(0, data[i].Time.length -2).replace(/:/g, ""));
            var y = parseFloat(data[i].Bid) ;
            tmpArray.push ( [x,y]);
        }           
    //$.plot($("#chart"), [ tmpArray]); 
    });
    $.plot($("#chart"), [tmpArray]);    
});

Actually, when "$.plot($("#chart"), [tmpArray]);" inside getJSON(), it works well. But, when I put it outside getJSON() it won't work. But if I put a breakpoint there and stepover it, it works. Could someone tell me why? Put inside works well in web brower but android. It works on android but only inside getJSON() function.

Answer 1

ye have to execute $.plot($("#chart"), [tmpArray]); after you will callback JSON API. You need to populate tmpArray , you can use " success: callback " and after to execute $.plot($("#chart"), [tmpArray]); .

jquery documentation

why you do not like that commented line ?

//$.plot($("#chart"), [ tmpArray]);

it should work if you uncomment this line and comment outside of the 'getJson' one

Answer 2

Since you are making an asynchronous call to get the data, in order to use it you have to put the code that uses it in the callback for the async call.

Meaning, $.getJSON("111.json" starts a 'thread' that goes to the server and retrieves the values from 111.json. but the normal 'thread' continues on with the line $.plot($("#chart"), [tmpArray]); without waiting on the async call to finish (which is essentially the definition of async).

Therefore, you have to put $.plot($("#chart"), [tmpArray]); inside of the function(data {}) , because that is a callback that fires after the async call is finished.

And one more thing...the reasons you putting a breakpoint there works is because you are essentially letting the async call finish (since it probably returns in sub second), and THEN running the $.plot($("#chart"), [tmpArray]); ...which gives the illusion that it should work without the debugger getting in the way.