Jquery/Javascript memory leak

Question

I have a web application which show chart and update chart status each 10 seconds.

HTML is:

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

JS for 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 for call chart function first and call that 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 which i run this website browser get 235MB memory but after 10 minutes i see browser get 255MB memory and this page is open 12 hours each day and browser crash because i have 10 chart on page and each 10 minutes browser get 100MB memory.

If i comment running handleLiveUpdatedChart() this issue will solve but i need to update data regularly.

At this time i need to know how i can handle memory and solve this issue.

Answer 1

There are several things that you can do:

1. Define the v function outside of the handleStackedChart function. You don't have to re-define it on each function call. And if the v function is called many times, for generating an element, use DOM APIs instead of using jQuery. Note that function calls are expensive.

2. Define the p object outside of the handleStackedChart function and only update it's variable properties, eg: p.xaxis.ticks = h;

3. You are currently adding a new listener to the #hoze-bar-chart on each handleStackedChart call. When the event is fired all of the event listeners of the element are called and this alone can crash the browser. Also, you can cache the result of $(document).width() and reuse it instead of calling the function again and again.

4. Instead of using an interval use the setTimeout function. When the request is done and chart is redrawn, set a new timeout.