Javascript 图表间隔越来越慢（Canvas.JS）

我遇到的问题是，当我通过JQuery事件单击查看图表时，图表运行得又快又平稳，但是如果我双击或可能单击10次，每次单击图表运行得越来越慢。也就是说，点击取决于图表的性能。我认为是

$.getscript（）

导致了这种低性能或糟糕的JQuery代码

下面的JQuery事件负责显示图表。请记住，用户有机会在图表之间导航，他们只能查看一个图表一次

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

             if(row == 1){
                $.getScript("diagram1.js"); // Display diagram1 
             } else {

             }
        }); 

这是图1.js。

(function (){ 
 $(document).ready(function(){

        var dps = []; // data

        var chart = new CanvasJS.Chart("diagram1 ",
        { 
          title:{
            text: "Exhaust Temperature"  
          data: [
          {        
            type: "spline",
            name: "Temp Cylinder 1",
            showInLegend: "true",
            legendText: "Temp Cylinder 1",
            dataPoints: dps1
          }
        });

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

    var updateChart = function (count) {
            count = count || 1;
            for (var j = 0; j < count; j++) {    
                dps.push({
                    x: xVal,
                    y: EXTS[1]       
                });
                xVal++;
            }; 
            if (dps.length > dataLength )
            {
                dps.shift();             
            }
            chart.render();    
        };
        // generates first set of dataPoints
        updateChart(dataLength); 
        // update chart after specified time. 
        setInterval(function(){updateChart()}, updateInterval); 
 });  
}());

（函数（）{
$（文档）.ready（函数（）{
var dps=[]；//数据
var chart=new CanvasJS.chart（“图1”，
{ 
标题：{
文字：“排气温度”
数据：[
{        
类型：“样条曲线”，
名称：“临时气缸1”，
showInLegend：“正确”，
legendText:“临时气缸1”，
数据点：dps1
}
});
var xVal=0；
var updateInterval=50；
var-dataLength=50；
var updateChart=函数（计数）{
计数=计数| | 1；
对于（var j=0；jdataLength）
{
dps.shift（）；
}
chart.render（）；
};
//生成第一组数据点
updateChart（数据长度）；
//在指定时间后更新图表。
setInterval（函数（）{updateChart（）}，updateInterval）；
});  
}());

$。getScript通过向DOM中添加脚本元素来获取并执行所讨论的JS。这不仅是一种昂贵的方法，而且有点不连贯。如果您只想在单击时执行diagram1.JS的内容，请加载diagram1.JS一次，并将其封装在一个可以随时调用的函数中。（换句话说，diagram1.js中的anon函数可以只是一个命名函数，没有“$（document）.ready”和iife包装器。它将处于全局范围，这并不理想，但仍然比当前的情况要好得多。）另外，我直到现在才明白这一点：如果按原样重复执行，每次都会创建一个新的setInterval。每次都会从初始化时起每50毫秒运行一次。累积效应会很快变得极端。重绘是昂贵的。这是你真正想要的吗？所以每次单击o在表行中，您将获取此脚本的另一个副本，该脚本本身将触发一个匿名函数，该函数引入另一个基于间隔的执行实例，该实例每50毫秒运行一次？在每个实例的每个间隔中，由于每次

计数

值递增，因此每次执行循环所需的时间较长（最多50个）？您正在引入大量处理器密集型工作。为什么您需要每50毫秒更新一次？这似乎很实用。@分号，我坚信这就是问题所在，因为感觉它越来越慢。我所做的是将updateinterval设置为0，但问题是一样的。我相信它会复制图表每次调用后都会重复一次..嗯，我怎么解决这个问题？@MikeBrant，你是对的。我需要50毫秒更新的原因是图表是动态的，它必须更新才能获取数据。