Question

由于某种原因，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多种代码变体......似乎没有任何东西可以达到目的。

Answer 1

这完美无瑕，但我不完全理解为什么我无法解释这一切。为了便于阅读，我将绘图功能与调整大小功能分开。我定义了日期（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'){


    }
});

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

1 个答案: