Javascript 当元素不使用setInterval而存在时

我有两个动态子模态，它们在父模态中出现/展开。（父模态或预扩展模态不需要以下更新）

在从父模态扩展而来的两个子模态中，我只是尝试在

中添加/调用“后退按钮”和“关闭按钮”。这两个子模态的标题都是
；我用下面的解决方案实现了这一点，但我讨厌使用设置的间隔，这也会在
setInterval
检查相关
时产生控制台错误。两个子模块\uuuuu标题
，直到找到为止

  on(footWrap, 'click', function (event) {
    let visible = coordinateWidget.visible;
    coordinateWidget.visible = !visible;

    var checkExists = setInterval(function() {
      const coordWid = document.getElementsByClassName('both_submodals__heading')[0];
      if (typeof(coordWid) != 'undefined' && coordWid != null) {
        const closeBlock = document.getElementById('closeCoord');
        const headerTitleTxt =  document.getElementsByClassName('esri-widget__heading')[0];
        headerTitleTxt.insertAdjacentHTML('afterend', '<div id="closeCoord">X</div>');
        on(closeBlock, 'click', function (event) {
          let visible = coordinateWidget.visible;
          coordinateWidget.visible = !visible;
        });
      }
    }, 100);
  });

on（裹足，'click'，函数（事件）{
let visible=坐标方向可见；
coordinateWidget.visible=！visible；
var checkExists=setInterval（函数（）{
const coordWid=document.getElementsByClassName（'two_submodals_uuheading'）[0]；
if（typeof（coordWid）！=“未定义”&&coordWid！=null）{
const closeBlock=document.getElementById（'closeCoord'）；
const headerTitleTxt=document.getElementsByClassName（'esri-widget__heading'）[0]；
headerTitleTxt.insertAdjacentHTML（'afterend'，'X'）；
打开（关闭块，'单击'，功能（事件）{
let visible=坐标方向可见；
coordinateWidget.visible=！visible；
});
}
}, 100);
});

通过对突变观察者的评论；我发现下面的解决方案是一个替代方案。。。但看起来像是一堆代码。


（功能（win）{
"严格使用",；
var侦听器=[]，
doc=win.document，
MutationObserver=win.MutationObserver | | win.webkit MutationObserver，
观察者
功能就绪（选择器，fn）{
//存储要监视的选择器和回调
监听器推送({
选择器：选择器，
fn:fn
});
如果（！观察者）{
//注意文档中的更改
观察者=新的变异观察者（检查）；
观察者。观察者（doc.documentElement{
儿童名单：是的，
子树：真
});
}
//检查元素当前是否在DOM中
检查（）；
}
函数检查（）{
//检查DOM中是否有与存储的选择器匹配的元素
for（var i=0，len=listeners.length，listener，elements；i
变异观察员：我们也能看看你的html/css吗？
 (function(win) {
        'use strict';

        var listeners = [], 
        doc = win.document, 
        MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
        observer;

        function ready(selector, fn) {
            // Store the selector and callback to be monitored
            listeners.push({
                selector: selector,
                fn: fn
            });
            if (!observer) {
                // Watch for changes in the document
                observer = new MutationObserver(check);
                observer.observe(doc.documentElement, {
                    childList: true,
                    subtree: true
                });
            }
            // Check if the element is currently in the DOM
            check();
        }

        function check() {
            // Check the DOM for elements matching a stored selector
            for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {
                listener = listeners[i];
                // Query for elements matching the specified selector
                elements = doc.querySelectorAll(listener.selector);
                for (var j = 0, jLen = elements.length, element; j < jLen; j++) {
                    element = elements[j];
                    // Make sure the callback isn't invoked with the 
                    // same element more than once
                    if (!element.ready) {
                        element.ready = true;
                        // Invoke the callback with the element
                        listener.fn.call(element, element);
                    }
                }
            }
        }

        // Expose `ready`
        win.ready = ready;

    })(this);