问题是什么?
我遇到的问题是,当我在不同的图表中导航时(仅当我导航时),图表越来越慢..存在内存泄漏,我无法弄清楚如何解决问题,所以我想向你们展示负责显示图表的 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");
}
最佳答案
正如@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]();
});
}
}
关于javascript - 仅在调用时运行方法 (JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30138043/