2
我是相當新的JavaScript和jQuery，所以請原諒任何不正確的廢話，我的問題描述。與重複jQuery的數據表AJAX內存管理調用
背景：我有哪裏我使用的是Datatables的jQuery插件顯示SQL表的直播，實時顯示的站點。 SQL查詢在ASP.NET中處理並作爲JSON對象返回給客戶端。現在，我只顯示〜500條記錄。
一旦JSON對象已經由數據表插件解析，我進行了表格單元格的一些條件格式 - 因此可能會有一些重DOM操作，如果我理解正確的是概念。我讀過這可能會發生很多內存泄漏的地方，但我也認爲jQuery在清理之後非常穩定。
我使用的setInterval定時器來更新數據表週期性，使得它顯示在實時變化。
我的問題：我的網站的內存消耗是失控的。在每次AJAX調用時（〜每2秒），頁面的內存使用量可跳至2MB。節流這個回去，我安裝了jQuery來當用戶在網站上主動檢測idle plugin - 我減少當用戶處於空閒狀態的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);
}