为什么这些javascript事件监听器工作,但是错误的值?

时间:2015-11-17 23:12:46

标签: javascript jquery post listener

由于某种原因,average_on变量仅在resize事件上切换错误。

window.addEventListener('resize', resizeEmptyCanvas, true);

$("#update_graph").click(function(){
    var cpu_on = document.getElementById('cpu_trending').checked ? "yes" : "no";
    var ram_on = document.getElementById('ram_trending').checked ? "yes" : "no";$
    var net_up_on = document.getElementById('net_up_trending').checked ? "yes" : "no";
    var net_down_on = document.getElementById('net_down_trending').checked ? "yes" : "no";
    var average_on = document.getElementById('average_trending').checked ? true : false;
    var time_num = $('#select_time_num').val();
    var time_unit = $('#select_time_unit').val();
    var time_period = time_num + time_unit;

    if (cpu_on=='yes'){
        var canvas = document.getElementById('trending_graph_canvas');
        canvas.width = window.innerWidth-80;
        canvas.height = window.innerHeight/2-20;
        var ctx = canvas.getContext('2d');

        GetTrendCPU(time_period, function(data, server_time){

            window.removeEventListener('resize', resizeEmptyCanvas, false);
            window.removeEventListener('resize', resizeEmptyCanvas, true);

            resizeCanvas(canvas, data, server_time, time_period, average_on);

            window.addEventListener('resize', function(){

                resizeCanvas(canvas, data, server_time, time_period, average_on);
                }, true);
        });
    }
});

function GetTrendCPU(time_period, CallBack){
    $.post("plugins/analytics/analytics_responder.php",
        {get_time: true},
        function(data){
            var now_time = data;
            $.post("plugins/analytics/analytics_responder.php",
                {cpu_use_trending: true, time_period: time_period},
                function(data){
                    if (data=='ERROR'){
                        CallBack('ERROR');
                    }else{
                        var cpu_trends = JSON.parse(data);
                        CallBack(cpu_trends, now_time);
                    }
                }
            );
        }
    );
}

function resizeCanvas(canvas, data, now, time_period, average) {
    var ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth-80;
    canvas.height = window.innerHeight/2-20;
    DrawTrending(ctx, canvas.width, canvas.height, data, now, time_period, average);
}

错误是当调整大小画布运行时,average_on变量100%正确,但是当它在事件侦听器中运行时,80%不正确。问题是这个,这就是我需要的:

  • 一旦页面加载空白画布,应调整大小到resizeEmptyCanvas中定义的某些尺寸,并且应该动态地执行。
  • 一旦用户按下更新图表,将收集所有设置,然后收集关联数据,然后更新图表以及监听器(使用新数据/设置)。

我认为问题与我有关,不想两次获取相同的数据(可能很多),但Ajax的异步行为可能需要它。抓两次数据太多了。

我怀疑如果我可以从函数GetTrendCPU返回sql结果它是可行的,但这似乎不可能与post。在这一点上,我已经尝试了100多种代码变体......似乎没有任何东西可以达到目的。

1 个答案:

答案 0 :(得分:0)

这完美无瑕,但我不完全理解为什么我无法解释这一切。为了便于阅读,我将绘图功能与调整大小功能分开。我定义了日期(a),仔细注意不同范围的名称变量,以及(b)BIG假设事件将有效地自动覆盖旧事件(旧代码的无效假设......但是惊喜!它现在有效!)。有谁知道为什么?我现在有一个大问题......每当我按下update_graph时,它会使服务器陷入50-100%的CPU使用...每次按下都会越来越多,erg。

//Initialize Graph
var canvas_init = document.getElementById('trending_graph_canvas');
var ctx_init = canvas_init.getContext('2d');
canvas_init.width = window.innerWidth-80;
canvas_init.height = window.innerHeight/2-20;
var time_num_init = $('#select_time_num').val();
var time_unit_init = $('#select_time_unit').val();
var time_period_init = time_num_init + time_unit_init;
var show_points_init = document.getElementById('show_points').checked ? true : false;
var average_on_init = document.getElementById('average_trending').checked ? true : false;

GetTrendCPU(time_period_init, function(data, server_time){
    resizeCanvas(canvas_init);
    DrawTrending(ctx_init, canvas_init.width, canvas_init.height, data, server_time, time_period_init, average_on_init, show_points_init);
});

GetTrendCPU(time_period_init, function(data, server_time){
    window.addEventListener('resize', function(){
        resizeCanvas(canvas_init);
        DrawTrending(ctx_init, canvas_init.width, canvas_init.height, data, server_time, time_period_init, average_on_init, show_points_init);
    }, true);
});
//window.addEventListener('resize', resizeEmptyCanvas, true);


$("#update_graph").click(function(){
    var cpu_on = document.getElementById('cpu_trending').checked ? "yes" : "no";
    var ram_on = document.getElementById('ram_trending').checked ? "yes" : "no";$
    var net_up_on = document.getElementById('net_up_trending').checked ? "yes" : "no";
    var net_down_on = document.getElementById('net_down_trending').checked ? "yes" : "no";
    var show_points = document.getElementById('show_points').checked ? true : false;
    var average_on = document.getElementById('average_trending').checked ? true : false;
    var time_num = $('#select_time_num').val();
    var time_unit = $('#select_time_unit').val();
    var time_period = time_num + time_unit;

    var canvas = document.getElementById('trending_graph_canvas');
    canvas.width = window.innerWidth-80;
    canvas.height = window.innerHeight/2-20;
    var ctx = canvas.getContext('2d');
    if (cpu_on=='yes'){


        GetTrendCPU(time_period, function(data, server_time){
            resizeCanvas(canvas);
            DrawTrending(ctx, canvas.width, canvas.height, data, server_time, time_period, average_on, show_points);
        });

        GetTrendCPU(time_period, function(data, server_time){
            window.addEventListener('resize', function(){
                resizeCanvas(canvas);
                DrawTrending(ctx, canvas.width, canvas.height, data, server_time, time_period, average_on, show_points);
            }, true);
        });

    }
    if (ram_on=='yes'){


    }
});