Javascript 重复jQuery数据表AJAX调用的内存管理

我对javascript和jQuery还比较陌生，所以请原谅我在问题描述中的任何错误措辞

Background：我在一个网站上使用jQuery插件实时显示SQL表。SQL查询在ASP.NET中处理，并作为JSON对象返回给客户端。现在，我只显示约500张记录

一旦datatables插件解析了JSON对象，我就会对表单元格执行一些条件格式设置——因此，如果我正确理解这个概念，可能会有一些繁重的DOM操作。我已经读到，这可能是大量内存泄漏的地方，但我还认为jQuery在自我清理方面非常可靠

我使用setInterval计时器定期更新数据表，以便实时显示更改

我的问题：我的站点内存消耗失控。在每次AJAX调用中（~每2秒），页面的内存使用量可能会增加2MB。为了抑制这种情况，我安装了一个for jQuery来检测用户在站点上何时处于活动状态，并且在用户空闲时，我将AJAX调用减少到每1小时一次。我听说这可以为浏览器提供更多的空间来执行垃圾收集

我发现，在活动状态下，内存会持续攀升，每4或5次调用内存就会略有下降，看起来好像正在执行垃圾收集。当用户空闲时AJAX调用减少时，内存不会上升。下面，我粘贴了我的代码的精简版本（不包括一些不相关的片段）。我相信这不是最干净的代码——但如果有人能提供一个指针，指出是什么导致了内存消耗——或者我如何减少内存消耗，那将不胜感激

提前谢谢

    //TIMER
    var updateFreq = 5000;
    var timer;

    setIdleTimeout(5000); // 5 seconds
    setAwayTimeout(50000); // 10 seconds
    document.onIdle = function() {
        clearInterval(timer);
        updateTable(3600000); //update once an hour
        //if (typeof (CollectGarbage) == "function") { CollectGarbage(); }
    }        
    document.onAway = function() { 
        clearInterval(timer);
        updateTable(3600000); //update once an hour
        //if (typeof (CollectGarbage) == "function") { CollectGarbage(); }
     }  
    document.onBack = function(isIdle, isAway) {
        clearInterval(timer);
        updateTable(5000); //update once every two seconds
    }
    //END TIMER

    var oTable;
    var oSettings;

$(document).ready(function() {
    oTable = $("#production_table").dataTable({
            "sDom": '<"TT"T><"tab"t><"F"fip>',
            "iDisplayLength": -1,
            "sAjaxSource": 'Data.ashx',
            // "sScrollY": y - 217,
            //"sScrollX": "100%",
            "bJQueryUI": true,
            "bDeferRender": true,
            // "bStateSave": true,
            "aaSorting": [[16, 'desc']],
            "sPaginationType": "full_numbers",
            //        "bAutoWidth": false,
            "fnDrawCallback": function(oSettings) {
                addFormat();
                try {
                    $('td').disableTextSelect();
                }
                catch (err) {
                }
            },
            "fnServerData": function(sSource, aoData, fnCallback) {
                $.ajax({
                    dataType: 'json',
                    type: "GET",
                    cache: false,
                    url: sSource,
                    data: aoData,
                    success: fnCallback
                })
            },
            "fnInitComplete": function(oSettings, json) {
                //alert('DataTables has finished its initialisation.');
                //                    addFormat();

                //$('td').disableTextSelect();
            },
            // "bProcessing": true,
            "aoColumns": [
                    { "mDataProp": null, "bSortable": false },
                    { "mDataProp": "serial", "sClass": "serial" },
                    { "mDataProp": "us", "sClass": "us" },
                    { "mDataProp": "type", "sClass": "type" },
                    { "mDataProp": "compartment", "sClass": "compartment" },
                    { "mDataProp": "leg", "sClass": "leg", "bVisible": false },
                    { "mDataProp": "comp", "sClass": "comp", "bVisible": false },
                    { "mDataProp": "patient", "sClass": "patient", "bVisible": false },
                    { "mDataProp": "dob", "sClass": "dob", "bVisible": false },
                    { "mDataProp": "surgeon", "sClass": "surgeon", "bVisible": false },
                    { "mDataProp": "surgery", "sClass": "surgery", "bVisible": false }
//I've truncated this section slightly...
                ]

        });
    updateTable(updateFreq);
});



function updateTable(uF) {
    // Update the table using the fnReloadAjax call method
        timer = setInterval(function() {
            var iStart = oSettings._iDisplayStart;
            oSettings = oTable.fnSettings();
            oTable.fnReloadAjax();
            //oTable.fnDisplayStart(oSettings, iStart, true);
        }, uF);
    }

//计时器
var updateFreq=5000；
无功定时器；
setIdleTimeout（5000）；//5秒
setAwayTimeout（50000）；//10秒
document.onIdle=函数（）{
清除间隔（计时器）；
updateTable（3600000）；//每小时更新一次
//if（typeof（CollectGarbage）=“函数”）{CollectGarbage（）；}
}        
document.onAway=函数（）{
清除间隔（计时器）；
updateTable（3600000）；//每小时更新一次
//if（typeof（CollectGarbage）=“函数”）{CollectGarbage（）；}
}  
document.onBack=函数（isIdle、isAway）{
清除间隔（计时器）；
updateTable（5000）；//每两秒更新一次
}
//结束计时器
可变的；
变量设置；
$（文档）.ready（函数（）{
oTable=$（“#生产#U表”）。数据表({
“sDom”：“，
“iDisplayLength”：-1，
“sAjaxSource”：“Data.ashx”，
//“sScrollY”：y-217，
//“sScrollX”：“100%”，
“bJQueryUI”：没错，
“bDeferRender”：没错，
//“bStateSave”：正确，
“aaSorting”：[[16，'说明]]，
“sPaginationType”：“完整编号”，
//“bAutoWidth”：假，
“fnDrawCallback”：函数（oSettings）{
addFormat（）；
试一试{
$（'td'）.disableTextSelect（）；
}
捕捉（错误）{
}
},
“fnServerData”：函数（sSource、aoData、fnServerData回调）{
$.ajax({
数据类型：“json”，
键入：“获取”，
cache:false，
网址：sSource，
数据：aoData，
成功：fnCallback
})
},
“fnInitComplete”：函数（oSettings，json）{
//警报（'DataTables已完成其初始化'）；
//addFormat（）；
//$（'td'）.disableTextSelect（）；
},
//“bProcessing”：正确，
“aoColumns”：[
{“mDataProp”：null，“bSortable”：false}，
{“mDataProp”：“serial”，“sClass”：“serial”}，
{“mDataProp”：“us”，“sClass”：“us”}，
{“mDataProp”：“type”，“sClass”：“type”}，
{“mDataProp”：“隔间”、“sClass”：“隔间”}，
{“mDataProp”：“leg”，“sClass”：“leg”，“bVisible”：false}，
{“mDataProp”：“comp”，“sClass”：“comp”，“bVisible”：false}，
{“mDataProp”：“patient”，“sClass”：“patient”，“bVisible”：false}，
{“mDataProp”：“dob”，“sClass”：“dob”，“bVisible”：false}，
{“mDataProp”：“外科医生”，“sClass”：“外科医生”，“bVisible”：false}，
{“mDataProp”：“手术”，“sClass”：“手术”，“bVisible”：false}
//我稍微截断了这个部分。。。
]
});
可更新（updateFreq）；
});
函数更新表（uF）{
//使用fnReloadAjax调用方法更新表
计时器=设置间隔（函数（）{
var iStart=OSETings._i显示开始；
oSettings=oTable.fnSettings（）；
fnReloadAjax（）；
//oTable.fDisplayStart（oSettings、iStart、true）；
}，uF）；
}

我早就应该发布这篇文章了。导致这种情况失控的原因是，我每2秒请求一次整个数据集（数千行）

---

为了解决这个问题，我最终改变了我的数据源，这样在加载时，我就可以从源中获取所有数据——但在那之后的任何时候，我都会从另一个源中获取数据，该源只返回自上次请求以来的更改。它确实减少了发送的数据量。结果，内存使用大大减少，垃圾收集在处理任何轻微爬升时都没有问题

我早就应该把这个贴出来了。什么是ca