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

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.