Jquery/Javascript memory leak -

i have web application show chart , update chart status each 10 seconds.

html is:

<div id="hoze-bar-chart"></div> 

js drawing chart:

var handlestackedchart = function() {   "use strict";    function v(e, t, n) {     $('<div id="tooltip" class="flot-tooltip">' + n + "</div>").css({       top: t,       left: e + 35     }).appendto("body").fadein(200);   }   var e = displaycount.e;   var n = displaycount.n;   var h = displaycount.h;    var p = {     xaxis: {       tickcolor: "transparent",       ticks: h     },     yaxis: {       tickcolor: "#ddd",       tickslength: 10     },     grid: {       hoverable: !0,       tickcolor: "#ccc",       borderwidth: 0,       bordercolor: "rgba(0,0,0,0.2)"     },     series: {       stack: null,       lines: {         show: !1,         fill: !1,         steps: !1       },       bars: {         show: !0,         barwidth: .5,         align: "center",         fillcolor: null       },       highlightcolor: "rgba(0,0,0,0.8)"     },     legend: {       show: !0,       labelboxbordercolor: "#ccc",       position: "ne",       nocolumns: 1     }   };   var d = [{     data: e,     color: green,     label: displaycount.totaltitle,     bars: {       fillcolor: green     }   }, {     data: n,     color: red,     label: displaycount.offlinetitle,     bars: {       fillcolor: red     }   }];    $.plot("#hoze-bar-chart", d, p);    var m = null;   var g = null;   $("#hoze-bar-chart").bind("plothover", function(e, t, n) {     if (n) {       if ($(document).width() >= 1024 && $(document).width() < 1680)         $("#hoze-bar-chart .flot-x-axis .flot-tick-label:eq(" + n.dataindex + ")").show();        var r = n.datapoint[1] - n.datapoint[2];       if (m != n.series.label || r != g) {         m = n.series.label;         g = r;          if ($(document).width() >= 1024 && $(document).width() < 1680)           $("#hoze-bar-chart .flot-x-axis .flot-tick-label:eq(" + n.dataindex + ")").hide();          $("#tooltip").remove();         v(n.pagex, n.pagey, r + " " + n.series.label);       }        //free memory       r = null;      } else {       if ($(document).width() >= 1024 && $(document).width() < 1680)         $("#hoze-bar-chart .flot-x-axis .flot-tick-label").hide();       $("#tooltip").remove();     }   })    //free memory   e = null;   n = null;   h = null;   displaycount.e = null;   displaycount.n = null;   displaycount.h = null;   displaycount.totaltitle = null;   displaycount.offlinetitle = null;   p = null;   d = null;   m = null;   g = null }; 

js call chart function first , call each 10 seconds:

var dashboard = function() {     "use strict";     return {         init: function() {             handlestackedchart();             handleliveupdatedchart();         }     } }()  var handleliveupdatedchart = function() {     "use strict";     var listenerajaxrequest = {};     listenerajaxrequest.readystate = 4;     function e() {         if( listenerajaxrequest.readystate != 1)         {             listenerajaxrequest = $.ajax({                 type: "get",                 url: "php_file_path",                 cache: false,                 datatype: "json",                 success: function (response) {                     displaycount.h = response.displycountarray.titledata;                     displaycount.e = response.displycountarray.onlinedata;                     displaycount.n = response.displycountarray.offlinedata;                     handlestackedchart();                      displaycount.h = null;                     displaycount.e = null;                     displaycount.n = null;                 }             });         }     } }; 

first time run website browser 235mb memory after 10 minutes see browser 255mb memory , page open 12 hours each day , browser crash because have 10 chart on page , each 10 minutes browser 100mb memory.

if comment running handleliveupdatedchart() issue solve need update data regularly.

at time need know how can handle memory , solve issue.

there several things can do:

1. define v function outside of handlestackedchart function. don't have re-define on each function call. , if v function called many times, generating element, use dom apis instead of using jquery. note function calls expensive.

2. define p object outside of handlestackedchart function , update it's variable properties, e.g.: p.xaxis.ticks = h;

3. you adding new listener #hoze-bar-chart on each handlestackedchart call. when event fired of event listeners of element called , alone can crash browser. also, can cache result of $(document).width() , reuse instead of calling function again , again.

4. instead of using interval use settimeout function. when request done , chart redrawn, set new timeout.