Diagram running in the background causing low performance (JavaScript + jQuery) -
the problem encountering there javascript file running in background causing application run slow.
i want javascript file run when in page1.html (because dynamic diagram), , not on page2.html or page3.html. using firefox performance analysis find out file running in background, , can see diagram18.js running in background of page2.html , page3.html... idea on how can prevent file running in background of page2.html , page3.html??
below jquery code, 2 things. first thing; loads html pages on icon user clicks on. second thing; checks if icon has been clicked (page2.html or page3.html), clear interval in 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 running interval if if('diagraminterval' + icon_clicked in window) { clearinterval(window['diagraminterval' + icon_clicked]); } // remember last diagram clicked. icon_clicked = icon; // load again 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](); }); } }; }); }); }); this diagram18.js: in order use inside jquery, idea has been set diagraminterval18 equal every setinterval command.
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 rpm backgroundcolor: '#19282b', outerradius: '80%', innerradius: '48%' }, { // bg color in between speed , rpm backgroundcolor: '#19282b', outerradius: '79%', innerradius: '79%' }, { // bg color 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 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 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 animasjon 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 animasjon 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); } if information here not clear, please ask need insert here.
why not import <script src="js/diagram18.js"></script> in page1.html only?
after this, try doing $('#page').empty() clear children element (when user moves on other pages): of element's content should gone, script page1.html may have loaded. hope helps...
Comments
Post a Comment