angularJS performance issue with timer fired

Question

I am building a pretty huge angular app, My problem is the memory leaks resulting in page freeze. on clicking a button, my app opens up a popup,(with help of custom directive) the content of this popup is dynamically appended and the popup is called with $http from the local file.It works fine.

I have used chrome developer tools to come up with the following as per what timeline gave me:

As you can see, the timer is fired for a long time before the render happens. and the time of this gets more and more when the user do it multiple times(closing popup and reopen again). Unless he goes to some other page and come back or refresh the page.So.... How can I destroy all the previous timers or what has to be done to collect the garbage.Or is it something else that has to be done.

Answer 1

You should wrap the function called by the button in a debounce function. See function below. This will make sure that whenever the user click on the button the last action is cancelled.

In regards to performance make sure that the popup content is removed from the dom when it is closed by the user.

Sourced from: https://davidwalsh.name/javascript-debounce-function

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};