定时器触发的angularJS性能问题

Question

我正在构建一个非常巨大的角应用程序,我的问题是内存泄漏导致页面冻结.单击一个按钮,我的应用程序打开一个弹出窗口,(在自定义指令的帮助下)动态附加此弹出窗口的内容,并使用本地文件中的$ http调用弹出窗口.它工作正常.

我已经使用了chrome开发人员工具来根据时间线给我的提出以下内容:

如您所见,在渲染发生之前,计时器会被触发很长时间.当用户多次执行此操作时,此时间越来越多(关闭弹出窗口并再次重新打开).除非他去其他页面然后回来或刷新页面.所以....我怎么能摧毁所有以前的计时器或者必须采取什么措施来收集垃圾.或者它是否需要做其他事情.

Answer 1

您应该将按钮调用的函数包装在去抖函数中。请参阅下面的功能。这将确保每当用户单击按钮时都会取消最后一个操作。

关于性能，请确保当用户关闭弹出窗口时，弹出内容会从 dom 中删除。

来源： 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);
  };
};