I'm having problems with a function that generates a Datatables.
It runs every 30 seconds, in the example I put it in 5, it starts to accumulate memory and does not release it. Check everywhere and I can not find the fault, the version that I leave to help me does not contain the ajax call, the only thing it does is call an ASP that returns an XML, it is parsed and added to a table that then it becomes datatable.
var timerGrilla = setInterval(function(){
var instGrilla = new getGrilla(); // genero grilla
instGrilla = null; //vacio
}, 5000)
function getGrilla(){
// Variables
var nsGrilla = { //namespace de la grilla
sGrilla: "",
xml: "",table: "",header: "",row: "",cellHeader: "",body: "",
icoObjeto: "",ccheck: "",
seleccionado: "",cell1: "",
aVel: [],aTipo: [],aColor: [],aNombre: [],aGrupo: [],aRazonSocial: [],aFechaPosi: [],aUContacto: [],aHojaRuta: [],aUbicacion: [],aFechaTemp: [],aTemp1: [],aTemp2: [],aRumbo: [],aLat: [],aLon: [],aRadio: [],aGeoData: [],aIdRastreable: [],sHRNombre:"",
gHRPadre:"",gHRDireccion:"",gHRLat:"",gHRLon:"",gHRId:"",aHRPadre: [],aHRDireccion: [],aHRLat: [],aHRLon: [],aHRId: [],
gColor:"", gNombre:"", gGrupo:"", gRazonSocial:"", gUContacto:"", gFechaPosi:"", gVel:"", gHojaRuta:"", gUbicacion:"", gFechaTemp:"", gRumbo:"", gLat:"",
gLon:"", gRadio:"", gGeoData:"", gIdRastreable:"", tipo:"",
}
// Construyo Grilla
nsGrilla.sGrilla = document.createElement("table");
nsGrilla.sGrilla.id="grilla";
nsGrilla.sGrilla.width="100%";
nsGrilla.sGrilla.height="500px";
nsGrilla.sGrilla.border="0";
nsGrilla.sGrilla.backgroundColor="black";
nsGrilla.sGrilla.cellspacing = 0;
nsGrilla.sGrilla.cellpadding = 0;
nsGrilla.header = nsGrilla.sGrilla.createTHead();
nsGrilla.row = nsGrilla.header.insertRow(0);
nsGrilla.row.style = "font-family: 'Nunito', sans-serif;; font-size: 22px;";
nsGrilla.cellHeader = nsGrilla.row.insertCell(0); nsGrilla.cellHeader.style = "width:15px !important;"
nsGrilla.cellHeader = nsGrilla.row.insertCell(1);
nsGrilla.cellHeader = nsGrilla.row.insertCell(2); nsGrilla.cellHeader.id="header"; nsGrilla.cellHeader.innerHTML = "Nom / Dom";
nsGrilla.cellHeader = nsGrilla.row.insertCell(3); nsGrilla.cellHeader.id="header"; nsGrilla.cellHeader.innerHTML = "Vel. ";
nsGrilla.cellHeader = nsGrilla.row.insertCell(4); nsGrilla.cellHeader.id="header"; nsGrilla.cellHeader.innerHTML = "Ubicación";
nsGrilla.cellHeader = nsGrilla.row.insertCell(5); nsGrilla.cellHeader.id="header"; nsGrilla.cellHeader.innerHTML = "Entidad";
nsGrilla.body = nsGrilla.sGrilla.createTBody();
for(i=0; i < 100; i++){
//correciones undefined
var sRumbo = ""; var sVel = ""; var sFechaPosi = ""; var sTemperatura = "";
var hasTemp = false;
if(nsGrilla.aTemp1[i] >0){ hasTemp=true; }
if(nsGrilla.aTemp1[i] === undefined){sTemperatura = "" }else{ sTemperatura = nsGrilla.aTemp1[i]}
if(nsGrilla.aRumbo[i]===undefined){sRumbo=""}else{sRumbo=nsGrilla.aRumbo[i]}
if(nsGrilla.aVel[i]===undefined){sVel=""}else{sVel=nsGrilla.aVel[i]}
if(nsGrilla.aRazonSocial[i]===undefined){sRazonSocial = ""}else{sRazonSocial = nsGrilla.aRazonSocial[i]}
if(nsGrilla.aFechaPosi[i]===undefined){sFechaPosi=""}else{sFechaPosi=nsGrilla.aFechaPosi[i]}
if(nsGrilla.aUbicacion[i]===undefined){sUbicacion=""}else{sUbicacion=nsGrilla.aUbicacion[i]}
//defino icono
if(nsGrilla.aTipo[i]=="Movil"){nsGrilla.icoObjeto = "img/ico-truck-blue.png";}
if(nsGrilla.aTipo[i]=="Lugar"){nsGrilla.icoObjeto = "img/ico-flag-blue.png";}
//agrego fila
nsGrilla.row = nsGrilla.body.insertRow(0);
nsGrilla.row.style = "cursor:pointer;color:#f88a15";
nsGrilla.cell1 = nsGrilla.row.insertCell(0);
//nsGrilla.cell1.innerHTML = "<input type='checkbox' id='"+ nsGrilla.aIdRastreable[i] + "' " + nsGrilla.ccheck + " ><span style='display:none;'>" + nsGrilla.ccheck + "</span>"; // lo filtro por span
nsGrilla.cell1.innerHTML = "PRUEBA"
nsGrilla.cell1.style = "width:15px !important;"
nsGrilla.cell1 = nsGrilla.row.insertCell(1);
//nsGrilla.cell1.innerHTML = "<div style='width:30px;background-color:#" + nsGrilla.aColor[i] + "'><img src=\'" + nsGrilla.icoObjeto + "'\" ></div><span style='display:none;'>" + nsGrilla.aTipo[i] + "</span>";
nsGrilla.cell1.innerHTML = "PRUEBA"
nsGrilla.cell1.title = nsGrilla.aTipo[i]; nsGrilla.cell1.alt = nsGrilla.aTipo[i];
nsGrilla.cell1 = nsGrilla.row.insertCell(2);
//nsGrilla.cell1.innerHTML = "<span>" + nsGrilla.aNombre[i] + "</span>";
nsGrilla.cell1.innerHTML = "PRUEBA"
nsGrilla.cell1.id = "tdNombre";
nsGrilla.cell1 = nsGrilla.row.insertCell(3);
//nsGrilla.cell1.innerHTML = "<span>" + sVel + "</span>";
nsGrilla.cell1.innerHTML = "PRUEBA"
nsGrilla.cell1.id="tdVelocidad";
nsGrilla.cell1 = nsGrilla.row.insertCell(4);
//nsGrilla.cell1.innerHTML = "<span>" + sUbicacion + "</span>";
nsGrilla.cell1.innerHTML = "PRUEBA"
nsGrilla.cell1.id="tdUbicacion";
nsGrilla.cell1 = nsGrilla.row.insertCell(5);
//nsGrilla.cell1.innerHTML = "<span>" + sRazonSocial + "</span>";
nsGrilla.cell1.innerHTML = "PRUEBA"
nsGrilla.cell1.id="tdEntidad";
}
$("#grilla-datagrid").html("");
$("#grilla-datagrid").html(nsGrilla.sGrilla);
nsGrilla.table = $('#grilla').DataTable( {
"paging": false,
"bInfo": false,
scrollY: "90vh",
scrollX: true,
scrollCollapse: true,
deferRender: true,
order: [2, "asc"],
LengthChange: false,
fixedHeaders:true,
bPaginate: false,
language: {
"decimal": "",
"emptyTable": "No hay información",
"info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
"infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
"infoFiltered": "(Filtrado de _MAX_ total entradas)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Mostrar _MENU_ Entradas",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"search": "Buscar:",
"zeroRecords": "Sin resultados encontrados",
"paginate": {
"first": "Primero",
"last": "Ultimo",
"next": "Siguiente",
"previous": "Anterior"
}
},
} );
}#grilla-datagrid {
position: absolute; z-index: 9999; left:0px; right: 0px; width: 70% !important; height: 100%; ;
background-color: rgba(54, 64, 76, 0.514);
border: 1px #519eb0 solid;
border-left:none;
border-radius: 0px 16px 16px 0px;
overflow: auto;
padding: 6px;
}
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 100%;
left:0px;
}<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
</head>
<body>
<div id="grilla-datagrid"></div>
</body>
</html>Any ideas that I may be doing wrong? I leave the jsfiddle .