更改事件導致內存泄漏，每次添加新的JQuery插件DataTables時都會加載

Question

我的內存泄漏有問題。

我在Html頁面中的具有事件change()的select標記（ Select2 ）之后顯示一個表（帶有DataTables插件 change() 。

我注意到任務管理器（IE或FireFox）有一些內存泄漏。

我的代碼運行良好，唯一的問題是內存泄漏。

這里是我的HTML代碼，我有2個表，第二個（table_statistic_10_ligne）當我點擊我的第一個表（table_statistic_10）的一行顯示，它會顯示該行的詳細信息：

<body>
 <select id="Select2" name="D1" style="margin-right :50px">
 </select>
 <script>
    $("#Select2").change(function () { selectStat10(Select2.options[Select2.selectedIndex].value) });
 </script>

 <table id="table_statistic_10" class="display">
    <caption class="caption">Detail van verkopen</caption>
    <thead>
    </thead>
    <tbody>
    </tbody>
 </table>
  <br />
  <br />

 <table id="table_statistic_10_ligne" class="display">
    <thead>
    </thead>
    <tbody>
    </tbody>
 </table>
 <script type="text/javascript">
    fillSlectTagStat10();
 </script>
</body>

這是我的JavaScript代碼，成功后，我檢索了值（從C＃中的Web服務檢索），並將其填充到datatables中：

function getStatistic10(dstart, dend, nam) {

var response;
var allstat10 = [];

if (typeof myTabLigne10 != 'undefined') {
    myTabLigne10.fnClearTable();
}
    $.ajax({
        type: 'GET',
        url: 'http://localhost:52251/Service1.asmx/Statistic_10_Entete',
        data: { "start": JSON.stringify(dstart), "end": JSON.stringify(dend), "name": JSON.stringify(nam) },
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (msg) {
            response = msg.d;
            for (var i = 0; i < response.Items.length; i++) {
                var j = 0;
                allstat10[i] = [response.Items[i].Nom, response.Items[i].Date, response.Items[i].Piece, response.Items[i].Tiers, number_format(response.Items[i].AmoutHT, 2, ',', ' '), number_format(response.Items[i].AmountTTC, 2, ',', ' '), response.Items[i].Quantite];
            }
            if (typeof myTabEntete10 != 'undefined') {
                myTabEntete10.fnClearTable();
            }
            fillDataTableEntete10(allstat10, dstart, dend);

        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("error loading statistic 10");
            alert("Status: " + textStatus + "\n" + "Error: " + errorThrown);
        }
    });
}

填充dataTables代碼：

function fillDataTableEntete10(data, dstart, dend) {

if ($("#table_statistic_10").css("visibility") == "hidden")
    $("#table_statistic_10").css("visibility", "visible");

myTabEntete10 = $('#table_statistic_10').dataTable({

    'aaData': data,
    'aoColumns': [
        { "sTitle": "Nom" },
        { "sTitle": "Date" },
        { "sTitle": "Piece" },
        { "sTitle": "Tiers" },
        { "sTitle": "AmoutHT" },
        { "sTitle": "AmountTTC" },
        { "sTitle": "Quantite" }
    ],

    "sPaginationType": "full_numbers",
    "iDisplayLength": 10,
    "bJQueryUI": true,
    "bDestroy": true,
    "bPaginate": true,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false,
    "sDom": '<"top"f<"clear">>rt<"bottom"ilp<"clear">>'


});

我在選擇標記（ Select2 ）中大約有10個值（客戶）。 但是，一位客戶在數據表中填寫了大約20.000行。 當我多次選擇此客戶時，我發現內存增加了。

我使用了fnClearTable()但是它不起作用。

你有一個想法，因為我有點迷茫了嗎？

編輯：我解決了這個問題，我使用fnClearTable（）和fnAddData（）更新了DataTables。 但是現在，問題出在我的click事件上，由於此代碼，我發生了內存泄漏：

                myTabEntete10.$('tr').bind('click',function () {
                var data = myTabEntete10.fnGetData(this);
                $('tr').removeClass('row_selected');
                $(this).addClass('row_selected');
                loadData10(dstart, dend, data[2], data[3]);
                delete data;
            });

為什么？

Answer 1

我解決了問題。

我替換現有的DataTables。

if (typeof myTabEntete10 != 'undefined') {
   $('body').off("click", '#table_statistic_10 tbody tr');
   myTabEntete10.fnClearTable();
   myTabEntete10.fnAddData(allstat10);

} else {
   fillDataTableEntete10(allstat10, dstart, dend);
}

我使用了DataTables的bDeferRender選項，請參見此處。

更改事件導致內存泄漏，每次添加新的JQuery插件DataTables時都會加載

問題描述

1 個解決方案

解決方案1
0 已采納 2014-03-31 09:46:07

更改事件導致內存泄漏，每次添加新的JQuery插件DataTables時都會加載

問題描述

1 個解決方案

解決方案1 0 已采納 2014-03-31 09:46:07

解決方案1
0 已采納 2014-03-31 09:46:07