Question

我正在制作一个带有html canvas元素的java脚本应用程序。单击画布会触发java脚本事件。但是函数的执行顺序并不像预期的那样

$('#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;
}

我希望控制台日志的顺序应该是“function1后跟function2”，但反之亦然。此外，如果我删除$ getJSON方法，执行顺序将按预期方式进行。

Answer 1

问题是在get_json_data()方法中你调用$.getJSON()这是一个异步方法：它执行JSON调用，当数据到达时，它调用回调函数。那么会发生什么：

您致电get_json_data()，致电$.getJSON()，需要一段时间
您致电show_curve()并打印"function2"
$.getJSON()获取数据，调用其回调并打印"function1"。

要解决此问题，您必须在致电$.getJSON()之前等待show_curve()结束。为此，您可以修改get_json_data()的签名以接受在$.getJSON()成功结束时调用的回调函数：

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 ;
}

您必须以这种方式修改初始呼叫：

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

});

在show_curve()成功结束后调用get_json_data()。

在这里，我发布了所有代码并进行了更改：

$('#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;
}

javascript中的函数执行顺序

1 个答案: