Jquery/Javascriptのメモリリーク

Question

私は10秒ごとにグラフの状態とチャートを表示するWebアプリケーションを持っています。

HTMLです：グラフを描画するための

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

JS：最初のコールグラフ機能のための

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とことを呼び出し、各10秒：

​​

初めてIこのウェブサイトのブラウザを実行して235MBのメモリを取得するが、10分後に私はブラウザが255MBのメモリを取得し、このページは開いている毎日12時間、ブラウザのクラッシュが発生します。なぜなら、10ページのグラフがあり、10分ごとに100MBのメモリが得られるからです。

私がhandleLiveUpdatedChart（）を実行しているとコメントした場合、この問題は解決しますが、定期的にデータを更新する必要があります。

私はメモリを処理してこの問題を解決する方法を知る必要があります。

Answer 1

あなたが行うことができますいくつかのものがあります：

1. はhandleStackedChart関数の外側v関数を定義します。各関数呼び出しで再定義する必要はありません。 v関数が何度も呼び出され、要素を生成する場合は、jQueryを使用する代わりにDOM APIを使用します。関数呼び出しは高価であることに注意してください。

2. はhandleStackedChart関数の外側pオブジェクトを定義し、唯一それが変数プロパティのアップデート、例えば：p.xaxis.ticks = h;

3. あなたは各handleStackedChartコールに#hoze-bar-chartに新しいリスナーを追加し、現在です。イベントが発生すると、要素のすべてのイベントリスナーが呼び出され、これだけでブラウザがクラッシュする可能性があります。また、$(document).width()の結果をキャッシュして、関数を何度も呼び出す代わりに再利用することもできます。

4. 間隔を使用する代わりに、setTimeout機能を使用してください。要求が完了し、グラフが再描画されたら、新しいタイムアウトを設定します。