Question

有什么问题？

我遇到的问题是，当我浏览不同的图表时（仅当我导航时），图表变得越来越慢..有内存泄漏，我无法弄清楚如何解决问题，所以我想向你们展示负责显示图表的JQuery事件代码，以及5个图表中的内容。

我真正想要的是，用户可以在没有任何性能降低的情况下自由导航，请我需要帮助，我已经在这个代码工作了6天了，我现在问题可以解决了！

我想要实现的目标是什么？

我希望用户有机会自由浏览五个图表，请记住，用户一次只能查看一个图表。在左侧有一个列表，用户必须单击该列表才能查看图表，右侧是图表的显示位置。（每个图表都是动态的）。

Diagram1.js：我有4个其他图表具有相同的代码结构但值不同。

(function (){

        var dps1 = []; 

        var chart = new CanvasJS.Chart("table1",
        { 
          title:{
            text: "This is Diagram 1"  
          },      
          data: [
          {        
            type: "spline",
            name: "Temp Cylinder 1",
            dataPoints: dps1
          }
        });

        var xVal = 0;
        var yVal = 100;  
        var updateInterval = 50; 
        var dataLength = 50; 

    var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.
            for (var j = 0; j < count; j++) {
                yVal = yVal +  Math.round(5 + Math.random() *(-5-5));  
                dps1.push({
                    x: xVal,
                    y: yVal       
                });
                xVal++;
            };  
            if (dps1.length > dataLength )
            {
                dps1.shift();             
            }    
            chart.render();     
        };

        // generates first set of dataPoints
        updateChart(dataLength); 
        // update chart after specified time. 
        setInterval(function(){updateChart()}, updateInterval); 
}());

list.JS：负责在每次点击后显示图表。 var pres_row如果没有这个，当用户多次点击同一行时，图表会变慢..

    var pres_row = 0; // Only one click

    $('[data-row]').on('click', function() {
         var row = $(this).attr('data-row');
         $('.active').removeClass('active');
         $('#table' + row).addClass('active'); 

             if(row == 1 && pres_row != 1){
                pres_row = 1
                $.getScript("diagram1.js");
             } else if (row == 2 && pres_row != 2) {
                pres_row = 2;
                $.getScript("diagram2.js"); 
             } else if (row == 3 && pres_row != 3) {
                pres_row = 3;
                $.getScript("diagram3.js"); 
             } else if (row == 4 && pres_row != 4) {
                pres_row = 4;
                $.getScript("diagram4.js");
             }else if (row == 5 && pres_row != 5) {
                pres_row = 5;
                $.getScript("diagram5.js");
             }

Answer 1

正如@Nit所说，你是一次又一次地将你的脚本文件加载到页面中，使得无数间隔运行而不进行清理。

你需要采用一些策略，a）只有在先前尚未加载的情况下加载diagramX.js并且b）有办法在为当前的一个开始之前清除已经运动的任何间隔。

示例：您可以在每个diagram1.js中定义函数，如：

// global interval handle
var diagramInterval1 = false;

// make it named, so you can check if it is already loaded
function diagram1() {
    ...
    diagramInterval1 = setInterval(updateChart, updateInterval); 
}

在list.js中，用于加载：

if(row !== pres_row){

    // clear the currently running interval if any
    if('diagramInterval' + pres_row in window) {
        clearInterval(window['diagramInterval' + pres_row]);
    }

    pres_row = row;

    // load only if not loaded
    if('diagram' + pres_row in window) {
        window['diagram' + pres_row]();
    }
    else {
        $.getScript("diagram" + pres_row + ".js", function() {
            window['diagram' + pres_row]();
        });
    }

}

Answer 2

@techfoobar，你的意思是在diagram1.js里面这样吗

(function (){

        var dps1 = []; 

        var chart = new CanvasJS.Chart("table1",
        { 
          title:{
            text: "This is Diagram 1"  
          },      
          data: [
          {        
            type: "spline",
            name: "Temp Cylinder 1",
            dataPoints: dps1
          }
        });

        var xVal = 0;
        var yVal = 100;  
        var updateInterval = 50; 
        var dataLength = 50; 

    var updateChart = function (count) {
            count = count || 1;
            // count is number of times loop runs to generate random dataPoints.
            for (var j = 0; j < count; j++) {
                yVal = yVal +  Math.round(5 + Math.random() *(-5-5));  
                dps1.push({
                    x: xVal,
                    y: yVal       
                });
                xVal++;
            };  
            if (dps1.length > dataLength )
            {
                dps1.shift();             
            }    
            chart.render();     
        };

// global interval handle
var diagramInterval1 = false;

// make it named, so you can check if it is already loaded
function diagram1() {
    ...
    diagramInterval1 = setInterval(updateChart, updateInterval); 
} 
}());

仅在调用时运行方法（JavaScript）

2 个答案: