图表运行在后台导致低性能(JavaScript + jQuery)
Diagram running in the background causing low performance (JavaScript + jQuery)
我遇到的问题是，有一个JavaScript文件在后台运行，导致应用程序运行缓慢。
我只希望这个JavaScript文件运行时，我在page1.html(因为它是一个动态图)，而不是在page2.html或page3.html。我正在用FireFox性能分析找出哪个文件在后台运行，我可以清楚地看到diagram18.js在后台运行page2.html和page3.html…关于如何防止这个文件在page2.html和page3.html的后台运行的任何想法??
下面是jQuery代码，它做两件事。第一件事;它加载用户点击图标的HTML页面。第二件事;它检查是否已经点击了另一个图标(page2.html或page3.html)，以清除diagram18.js中的间隔。
$(function(){
var icon_clicked = 0;
$('.page-links').click(function() {
$('#page').load('page' + $(this).data('target') + '.html');
$('[data-target]').on('click', function() {
var icon = $(this).attr('data-target');
if (icon !== icon_clicked) {
// clear the currently running interval if any
if('diagramInterval' + icon_clicked in window) {
clearInterval(window['diagramInterval' + icon_clicked]);
}
// Remember last diagram that was clicked.
icon_clicked = icon;
// load again only if not loaded
if('diagram' + icon_clicked in window) {
window['diagram' + icon_clicked]();
} else {
$.getScript("SensorTables/diagram" + icon_clicked + ".js", function() {
window['diagram' + icon_clicked]();
});
}
};
});
});
});
这是diagram18.js:为了在jQuery中使用它，我们的想法是将diagramInterval18设置为等于每个setInterval命令。
var diagramInterval18 = false;
function diagram18(){
var speedColor = '#19282B';
var rpmColor = '#19282B';
var dialColor = '#ff0000';
if(CRANK >= 13){
dynColor = "#E6023F";
}
else{
dynColor = "#19282B";
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
animation: {
duration: 10 //animasjonen på speedometeret
},
renderTo: 'container',
type: 'gauge',
alignTicks: false,
},
title: {
text: ''
},
pane: [{
startAngle: -180,
endAngle: 120,
size: 300,
background: [{
// BG color for rpm
backgroundColor: '#19282B',
outerRadius: '80%',
innerRadius: '48%'
}, {
// BG color in between speed and rpm
backgroundColor: '#19282B',
outerRadius: '79%',
innerRadius: '79%'
}, {
// BG color for speed
// backgroundColor: '#E4E3DF',
backgroundColor: {
radialGradient: {
cx: 0.5,
cy: 0.6,
r: 1.0
},
stops: [
[0.3, '#19282B'],
//[0.6, '#FF04FF'],
[0.45, '#19282B'],
[0.7, '#E6023F'],
//[0.7, '#FFFF04'],
]
},
innerRadius: '0%',
outerRadius: '105%'
}, {
// Below rpm bg color
// backgroundColor: '#909090',
zIndex: 1,
backgroundColor: {
radialGradient: {
cx: 0.5,
cy: 0.75,
r: 0.8
},
stops: [
[0.6, '#19282B' ],
[0.8, '#E6023F'], //sirkel mellom digital og rpm
[1, '#19282B']
]
},
outerRadius: '48%',
innerRadius: '40%',
}, {
backgroundColor: '#19282B',
zIndex: 1,
outerRadius: '40%',
innerRadius: '39%'
}, {
backgroundColor: dynColor, //'#19282B', //bakgrunnen i sirkelen
outerRadius: '39%'
}]
}, {
startAngle: -180,
endAngle: 120,
size: 200
}],
yAxis: [{
title: {
text: 'km/h',
y: 210,
x: 0,
style: {
color: "#092C37",
fontFamily: 'Helvetica, Sans-Serif', //font i sirkelkjernen km/t
fontSize: '9px',
fontStyle: 'italic'
}
},
min: 0,
max: 300,
tickInterval: 10,
tickLength: 6,
lineWidth: 2,
lineColor: "#FFFFFF",
tickColor: "#FFFFFF",
minorTickInterval: 10,
minorTickLength: 3,
minorTickWidth: 2,
minorTickColor: "#FFFFFF",
endOnTick: false,
labels: {
distance: -28,
rotation: 'auto',
step: 2,
style: {
fontFamily: 'Helvetica, Sans-Serif',
fontSize: '18px',
color: "#FFFFFF", //speed color
}
},
pane: 0
}, {
pane: 0
}, {
title: {
text: 'rpm x1000',
y: 140, // posisjon på teskten
x: 0,
style: {
color: rpmColor, //farge på teksen rpm x1000
fontFamily: 'Helvetica, Sans-Serif',
fontSize: '9px',
fontStyle: 'italic'
}
},
min: 0,
max: 16,
offset: -21,
minorTickInterval: 1,
tickInterval: 1,
tickLength: 4,
minorTickLength: 5,
lineColor: rpmColor,
tickWidth: 2,
minorTickWidth: 2,
lineWidth: 2,
labels: {
distance: 5,
rotation: 'auto',
style: {
fontFamily: 'Helvetica, Sans-Serif',
fontSize: '17px',
color: "#FFFFFF"
},
formatter: function() {
if (this.value >=13) {
return '<span style="color:' + "#C7003D" +'">' + this.value + "</span>"; //fargen på limit rpm tekst
}
return this.value;
}
},
pane: 1,
plotBands: [{
from: 13,
to: 16,
color: "#092C37", //farge på red limit rpm linje
innerRadius: '70%',
outerRadius: '80%'
}]
}],
tooltip: { enabled: false },
credits: {
enabled: false
},
series: [{
name: 'Speed',
yAxis: 0,
data: [ 0 ],
dataLabels: {
color: '#FFFFFF',
borderWidth: 0,
y: 24,
x: 0,
style: {
fontSize: '37px',
fontFamily: 'Helvetica, Sans-Serif',
//fontStyle: 'italic'
},
formatter: function() {
return this.y.toFixed(1);
}
},
dial: {
backgroundColor: dialColor,
baseLength: '90%',
baseWidth: 7,
radius: '100%',
topWidth: 3,
rearLength: '-74%',
borderColor: '#E50544',
borderWidth: 1
},
zIndex: 1,
pivot: {
radius: '0'
}
}, {
name: 'RPM',
data: [ 0 ],
yAxis: 2,
dataLabels: {
color: '#FFFFFF',
borderWidth: 0,
y: -20,
x: 0,
style: {
fontSize: '14px',
fontFamily: 'Helvetica, Sans-Serif',
//fontStyle: 'italic'
},
formatter: function() {
return (this.y * 1000).toFixed(0) + " rpm"
}
},
dial: {
backgroundColor: dialColor,
baseLength: '90%',
baseWidth: 7,
radius: '100%',
topWidth: 3,
rearLength: '-74%',
borderColor: '#631210',
borderWidth: 1
},
pivot: {
radius: '0'
}
}]
}, // end document
function(chart) {
// 2nd pane center
var pane = chart.panes[1].center;
chart.ledBox = chart.renderer.rect(pane[0]-50, pane[1], 120, 80, 3).attr({
fill: 'rgba(229,137,100, 0)',
}).add();
diagramInterval18 = setInterval(function () {
var val = (CRANK === undefined) ? null : CRANK;
var speed = (dash_kmt === undefined) ? null : dash_kmt;
if (val !== null) {
chart.series[1].points[0].update(val);
}
if (speed !== null) {
chart.series[0].points[0].update(speed);
}
if (val === null && speed === null) {
clearInterval(diagramInterval18);
}
}, 0);
}); // end function(chart)
}); // end document
// CTS sensor
FusionCharts.ready(function () {
var chart = new FusionCharts({
animation: {
duration: 800 //animasjonen på speedometeret
},
type: 'cylinder',
renderAt: 'chart-container1',
id: 'fluid_temperature_water',
width: '70',
height: '180',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "",
"subcaption": "",
"subcaptionFontBold": "1",
"lowerLimit": "60",
"upperLimit": "120",
"numberSuffix": "",
"bgColor": "#000000",
"showBorder": "0",
"thmFillColor": "#993333",
"BgAlpha": "91.9",
"showTickMarks":"1",
"showTickValues":"0",
"baseFontColor":"FFFFFF"
//"animation":'0' //fjerne all animasjon for cylinderen
},
"value": CTS },
"events": {
"rendered" : function (evtObj, argObj){
diagramInterval18 = setInterval(function () {
FusionCharts.items["fluid_temperature_water"].feedData("&value="+CTS);
}, 1000);
}
}
})
.render();
});
// FPS sensor
FusionCharts.ready(function () {
var chart = new FusionCharts({
animation: {
duration: 800 //animasjonen på speedometeret
},
type: 'cylinder',
renderAt: 'chart-container2',
id: 'fuel-cylinder',
width: '70',
height: '180',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "",
"subcaption": "",
"subcaptionFontBold": "1",
"lowerLimit": "0",
"upperLimit": "30",
"numberSuffix": "",
"bgColor": "#000000",
"showBorder": "0",
"thmFillColor": "#993333",
"BgAlpha": "91.9",
"showTickMarks":"1",
"showTickValues":"0",
"baseFontColor":"FFFFFF"
//"animation":'0' //fjerne all animasjon for cylinderen
},
"value": FPS },
"events": {
"rendered" : function (evtObj, argObj){
diagramInterval18 = setInterval(function () {
FusionCharts.items["fuel-cylinder"].feedData("&value="+FPS);
}, 1000);
}
}
})
.render();
});
// MAP Sensor
function time_updater(){
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10)
minutes = "0" + minutes
document.getElementById("time").innerHTML = ("<p>" + hours + ":" + minutes + " " + "</p>");
}
// setInterval(time_updater, 1000);
diagramInterval18 = setInterval(function() {
$("#map").html("Manifold Absolute Pressure: " + MAP);
}, 500);
}
如果这里的信息不清楚，请询问您需要什么，然后我将在这里插入。
为什么不只在page1.html中导入<script src="js/diagram18.js"></script>呢?
$('#page').empty()以清除该元素的所有子元素(当用户移动到其他页面时):该元素的所有内容都应该消失，甚至是page1.html可能加载的任何脚本。
相关文章：
- 在javascript中搜索项目列表的性能
- JavaScript数组优化以提高性能
- JavaScript-===vs===运算符性能
- Javascript对象中的跨浏览器密钥查找性能
- 它是否创建了许多不利于JavaScript性能的变量
- html5画布和纯Javascript/GWT的游戏性能
- javascript getAttribute是否会影响性能或触发布局
- Javascript性能-在dom上迭代并添加侦听器
- 在JavaScript中，在对象上装箱每个数字和字符串的性能成本是多少
- 从自执行函数返回函数的Javascript性能命中率
- javascript散列/数组混合性能
- javascript:将文本附加到文本区域的性能
- 性能惩罚JavaScript回调函数
- 行之间有空格会影响 JavaScript 代码的性能吗?
- JavaScript 库的性能开销
- 按“Levenshtein Distance”对数组进行排序，在Javascript中具有最佳性能
- 将javascript和css内联放在一个缩小的html文件中以提高性能
- 数字精度如何影响 JavaScript 的性能，或者会影响性能
- 数组对象与数组文字-性能JavaScript
- 图表运行在后台导致低性能(JavaScript + jQuery)
