Modifying DOM nodes via JS causes memory leaks

77
August 01, 2019, at 9:30 PM

I'm working on a web template on WordPress that replaces the content of a specific div each period of time using jQuery. However after a few loops the page crashes and the performance monitor of Chrome shows that the number of DOM nodes has increased on each iteration which causes the problem of memory leaks.

After a lot of research I understand that some elements are deleted from the DOM but not from memory and the garbage collector has no access to those references to remove them.

Any suggestions please?

function get_digital_posts(id_station, id_div) {
  var request = jQuery.ajax({
    url: tdf.ajax_url,
    type: 'post', // async: false, 
    data: {
      action: 'myserverfunctionName',
      sq_id: id_station,
      nomVig: id_div
    },
    dataType: "json",
    success: function(response) {
      illimiteloop(response, id_station, id_div, 0);
    },
    complete: function() {
      request.abort();
    }
  });
}
var alter = function(a, response) {
  return a < response.length - 1 ? a + 1 : 0;
}
function initialLoop(response, tempsaffichage, counter, id_div) {
  var transitionEffect = "";
  if (counter < response.length - 1) {
    transitionEffect = response[counter].transition;
    refresh_elt(response[counter].id, id_div,
      transitionEffect, tempsaffichage);
    setTimeout(function() {
      counter = alter(counter, response);
      if (counter < response.length - 1) {
        var tepsaffichage = get_Timer(response[counter].tempsAfiich);
        initialLoop(response, tepsaffichage, counter, id_div);
      } else {
        return;
      }
    }, tempsaffichage);
  }
}
function illimiteloop(response, id_station, id_div, counter) {
  if (response[counter].tempsAfiich) {
    var tempsaffichage = get_Timer(response[counter].tempsAfiich); // return delay of this content on ms
    var totalTime = get_Timer(response[response.length - 1].timeSum); // return delay of all content on ms 
    initialLoop(response, tempsaffichage, counter, id_div);
    var refreshId = setInterval(function() {
      get_digital_posts(id_station, id_div);
      clearInterval(refreshId);
    }, totalTime);
  }
}
function refresh_elt(idContent, id_div, transition, tps) {
  var classNames = transition;
  var outputx = null;
  outputx = globalContent[idContent].content; // this is an html content 
  (document.getElementById(id_div)).innerHTML = "";
  var obj = document.getElementById(id_div);
  var cln = obj.cloneNode(true);
  obj.parentNode.removeChild(obj);
  jQuery(obj).unbind();
  $(obj).remove();
  obj = null;
  jQuery("#contentdiv").find('.row').append(cln);
  jQuery("#contentdiv").find('.row').find('#' + id_div).html(outputx);
  cln = null;
  // ...
}
READ ALSO
How comparate attributes of multiple fields with array

How comparate attributes of multiple fields with array

I am trying to comparator all attribute of the inputs with array is coming with those attributes name are in lowercases in DOM those are not lowercases

55
Why won&#39;t my iron-ajax network calls terminate?

Why won't my iron-ajax network calls terminate?

I'm creating a web page that uses iron-ajax calls to receive data from an APIWhen I inspect the page, the network tab shows seemingly endless iron-request objects

70
ANGULAR. Send array data get it of Itunes API; from component-search to component-main, via service

ANGULAR. Send array data get it of Itunes API; from component-search to component-main, via service

In angular 7I need to send an Array information get it from Itunes Api, which is included in a component called "search", to another component called "catalog"

101
Checking if future time (epoch milliseconds) is within 3 hours of current time (epoch milliseconds)

Checking if future time (epoch milliseconds) is within 3 hours of current time (epoch milliseconds)

I am trying to compare two times to see if a future time is within the next 3 hours of current time

83