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

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说，你一次又一次地加载你的脚本文件到离开，而不运行的多个间隔的页面清理它们。

您需要采用一些策略，您只需在以下情况下载入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); 
} 
}());