AngularJs 内存泄漏 Jquery答案

【问题标题】：AngularJs MemoryLeak JqueryAngularJs 内存泄漏 Jquery
【发布时间】：2019-01-21 09:48:45
【问题描述】：

我想使用以下服务在 angularjs 页面上显示自定义 html：

app.service('automaticFunctions', function ($timeout) {

this.init = function initAutomaticFunctions(scope, $elem, attrs) {
    switch (scope.content.type) {
        case 'list':
            ....
            break;  
        case 'scroll':
            ....
            break;
        case 'custom':

        function updateFrameContent() {
            var frame = $($elem).find(".customFrame")[0];

            if (scope.content.frameType === "url") {
                scope.content.ngHide.frameContent = true;
                scope.content.ngHide.frameUrl = false;
                frame.src = scope.content.frameUrl;
            }
            if (scope.content.frameType === "html") {
                scope.content.ngHide.frameUrl = true;
                scope.content.ngHide.frameContent = false;
                frame.onload = function () {
                    frame.contentWindow.document.write(scope.content.frameContent);
                    frame.onload = null;
                };
                frame.src = "";
                // frame = null;
            }
        }

            scope.$watchGroup(['content.frameType', 'content.frameContent', 'content.frameUrl'], function () {
                updateFrameContent();
            });
            updateFrameContent();
            break;
    }

}
});

当我在页面之间路由时，我从指令中调用 init 过程 10 到 20 次。

我有大量内存泄漏，我不知道如何处理帧变量。如果我将其设置为null，则没有内存泄漏但不显示内容。

【问题讨论】：

您是否尝试过只设置一次frame 变量，然后像在init fnc 中那样重复使用它。您可以在init fnc 上方声明frame 变量，并将var frame = $($elem).find(".customFrame")[0]; 行编辑为：if (!frame) frame = $($elem).find(".customFrame")[0];
不行，因为每次在init函数中，frame var都有不同的值
在分析应用程序时是否检查过是否有任何分离节点？ developers.google.com/web/tools/chrome-devtools/memory-problems
是的，我有分离节点..

标签： javascript jquery angularjs memory-leaks

【解决方案1】：

我有大量内存泄漏，我不知道如何处理 frame 变量。如果我设置为null，则没有内存泄漏但不显示内容。

使用$destroy事件释放frame对象：

    function updateFrameContent() {
        var frame = $($elem).find(".customFrame")[0];

        scope.$on("$destroy", function() {
            frame = null;
        });

        if (scope.content.frameType === "url") {
            scope.content.ngHide.frameContent = true;
            scope.content.ngHide.frameUrl = false;
            frame.src = scope.content.frameUrl;
        }

在 AngularJS 框架中，ng-repeat、ng-if、ng-view 等指令可以创建和销毁 DOM 元素和子作用域。使用$destroy 事件包含任何需要的拆卸代码。

有关信息，请参阅AngularJS $scope API Reference - Events。

【讨论】：