0
Проблема, с которой я сталкиваюсь, заключается в том, что в фоновом режиме есть файл JavaScript, заставляющий приложение работать медленно.Диаграмма, работающая в фоновом режиме, вызывающая низкую производительность (JavaScript + jQuery)
Я только хочу этот файл 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);
}
Если информация здесь неясна, пожалуйста, спросите, что вам нужно, после чего вставим ее здесь.