Order of function execution in javascript

Question

I am making a java script application having an html canvas element. Clicking on canvas triggers a java script event. But the order of execution of function is not as expected

$('#canvas1').on('click',function(e){
    get_json_data();    
    //plot the json data
    show_curve();
});

function get_json_data(){        
    $.getJSON("program/heatmap_slices.json",function(data){            
        console.log("function1");
        visibilty = data['photo'][1][1];              
    });
    return ;
}

function show_curve(){
    $("#canvas2").show();
    console.log("function2");
    var canvas2 = document.getElementById('canvas2');
    var ctx2 = canvas2.getContext("2d");
    var myNewChart = new Chart(ctx2);

    var data = {
    labels: points,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(175,175,220,0.5)",
            strokeColor: "rgba(150,150,220,1)",
            highlightFill: "rgba(100,100,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: visibilty,
        }

    ]
    };

    var options = {
        barStrokeWidth : 2,
    }

    var myBarChart = new Chart(ctx2).Bar(data,options);
    points =[];

    return;
}

I expect the order of console log should be "function1 followed by function2" but its the other way round. Also if I remove $getJSON method, the execution order comes as expected.

You will need `callback` as you want that function to be executed ajax ajax `success callback`! — Rayon, Sep 30 '15 at 07:25
From code move line "show_curve();" in to below of line "console.log("function1");" and check it. and see http://stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts — MANISHDAN LANGA, Sep 30 '15 at 07:31

Andrea · Accepted Answer · 2015-09-30T07:34:32.040

The problem is that in get_json_data() method you call $.getJSON() which is an asyncronous method: it executes the JSON call and when the data arrives, it calls the callback function. So what happens is that:

you call get_json_data(), it calls $.getJSON() and it takes a while
you call show_curve() and it prints "function2"
the $.getJSON() gets the data, calls its callback and print "function1".

To solve the problem you have to waits that $.getJSON() ends before call show_curve(). To do that, you can modify the signature of get_json_data() to accept a callback function to call when $.getJSON() successfully ends:

function get_json_data(callback){  // <-- Callback      
    $.getJSON("program/heatmap_slices.json",function(data){            
        console.log("function1");
        visibilty = data['photo'][1][1];
        callback(); // <-- Call it inside '$.getJSON' callback
    });
    return ;
}

The you have to modify the intial call in this way:

$('#canvas1').on('click',function(e){
    get_json_data(function() {
        //plot the json data
        show_curve();
    });    

});

So that show_curve() is call after get_json_data() successfully ends.

Here I post all your code with che changes:

$('#canvas1').on('click',function(e){
    get_json_data(function() {
        //plot the json data
        show_curve();
    });    

});

function get_json_data(callback){        
    $.getJSON("program/heatmap_slices.json",function(data){            
        console.log("function1");
        visibilty = data['photo'][1][1];
        callback();
    });
    return ;
}

function show_curve(){
    $("#canvas2").show();
    console.log("function2");
    var canvas2 = document.getElementById('canvas2');
    var ctx2 = canvas2.getContext("2d");
    var myNewChart = new Chart(ctx2);

    var data = {
    labels: points,
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(175,175,220,0.5)",
            strokeColor: "rgba(150,150,220,1)",
            highlightFill: "rgba(100,100,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: visibilty,
        }

    ]
    };

    var options = {
        barStrokeWidth : 2,
    }

    var myBarChart = new Chart(ctx2).Bar(data,options);
    points =[];

    return;
}

Order of function execution in javascript

1 Answers1