javascript - 突变观察者添加节点不可用即时（延迟）

Question

我正在使用突变观察器来监视添加到 DOM 中的特定元素，而不是在未找到元素时使用带有 return 的 setInterval。分享一下我的代码：

而不是这个：

var = myinterval = setInterval(function(){
if($('#my-div-id').length == 0) return;
$('#my-div-id').before('<div>I am an added div</div>');
});

我用这个：

   var createMutationObserver = function(mutationObjectName, targetNodeName, dataFunction, mutationObjectType = 'id', targetNodeType = 'id'){

        if( $(mutationObjectType == 'id' ? '#' + mutationObjectName : '.' + mutationObjectName).length !== 0){
            dataFunction();
            return;
        }

        let targetNode = targetNodeType.toLowerCase() == 'id' ? document.getElementById(targetNodeName) : (targetNodeType.toLowerCase() == 'class' ? document.getElementsByClassName(targetNodeName)[0] : '' );

        let mutationObjectTypeClean = mutationObjectType.toLowerCase() == 'id' ? 'id' : (mutationObjectType.toLowerCase() == 'class' ? 'className' : '' );

        let currentMutation = new MutationObserver(function(mutationsList, observer) {
            // Use traditional 'for loops' for IE 11
            for(var mutation of mutationsList) {

                if (mutationType === 'childList' && mutation.type === 'childList') {
                    if(mutation.addedNodes.length !== 0){
                            if(mutation.addedNodes[0][mutationObjectTypeClean] == mutationObjectName){
                                // Code added here
                                dataFunction();
                                // Disconnect observer
                                observer.disconnect();
                                break;
                            }

                    }

                }


            }
        });

        currentMutation.observe(targetNode, { attributes: true, childList: true, subtree: false });
    };


createMutationObserver('documentBody' ,'my-div-id', () => {
$('#my-div-id').before('<div>I am an added div</div>');
console.log($('#my-div-id').length);
});

我使用的“documentBody” id 是我的 body 标签的 id。

我遇到的问题是，当我添加 id 为“my-div-id”的 div 时，突变发生并且突变观察者工作，但是 id 为“my-div-id”的 div 不存在，我得到 0当我控制台日志并且之前的语句不起作用时。

任何想法为什么即使突变已经触发，元素也不存在？

标签： javascriptmutation-observers