首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >DOMNodeRemovedFromDocument的简单MutationObserver版本

DOMNodeRemovedFromDocument的简单MutationObserver版本
EN

Stack Overflow用户
提问于 2015-08-04 08:23:29
回答 1查看 3.1K关注 0票数 14

我将一些功能附加到DOM元素,并希望能够在从DOM中删除元素时清除所有引用,以便可以对其进行垃圾回收,

我最初检测元素移除的版本是这样的:

var onremove = function(element, callback) {
    var destroy = function() {
        callback();
        element.removeEventListener('DOMNodeRemovedFromDocument', destroy);
     };
     element.addEventListener('DOMNodeRemovedFromDocument', destroy);
};

然后我读到,为了支持MutationObservermutation events被抛弃了。所以我试着移植我的代码。这是我想出来的:

 var isDescendant = function(desc, root) {
     return !!desc && (desc === root || isDecendant(desc.parentNode, root));
 };

var onremove = function(element, callback) {
    var observer = new MutationObserver(function(mutations) {
        _.forEach(mutations, function(mutation) {
            _.forEach(mutation.removedNodes, function(removed) {
                if (isDescendant(element, removed)) {
                    callback();

                    // allow garbage collection
                    observer.disconnect();
                    observer = undefined;
                }
            });
        });
    });
    observer.observe(document, {
         childList: true,
         subtree: true
    });
};

这在我看来过于复杂(而且效率不是很高)。是我漏掉了什么,还是这真的应该是这样的呢?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-23 04:37:06

实际上..。是的,有一个更优雅的解决方案:)。

您添加的内容看起来很好,而且似乎得到了很好的优化。但是,有一种更简单的方法可以知道节点是否附加到DOM。

function onRemove(element, onDetachCallback) {
    const observer = new MutationObserver(function () {
        function isDetached(el) {
            if (el.parentNode === document) {
                return false;
            } else if (el.parentNode === null) {
                return true;
            } else {
                return isDetached(el.parentNode);
            }
        }

        if (isDetached(element)) {
            observer.disconnect();
            onDetachCallback();
        }
    })

    observer.observe(document, {
         childList: true,
         subtree: true
    });
}
票数 13
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31798816

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档