Question

我正在尝试等待创建一个元素，所以我所做的是循环（技术上导致某种程度上无限循环），直到该元素存在。我无法控制这一点，否则当然我将我的JS放在创建元素的JS下面。

在我的IIFE中，我有

awe = function(opts){
    if(d.getElementsByClassName('sceditor-container')[0]){
     return new AWE(opts);
     }else return editor(opts);
};

我尝试了很多不同的方法，例如不返回，只是做awe(opts)和editor(opts)我编写编辑器，因为在我的IIFE中我返回(window.editor = awe)是否有更好的方法在等待元素后面。我已经将awe/editor包裹在dom ready函数中，如此

 $(function(){
   var textEditor = editor({
                    //options
                });
       textEditor.add();
 });

还试过这个人

awe = function(opts){
    if(!d.getElementsByClassName('sceditor-container')[0]){
       interval=setInterval(awe(opts),100);
     }else{
      clearInterval(interval);
      return new AWE(opts);
     }
};

注意我也尝试使用此超时暂停

已更新 决定向AWE对象添加ready函数

ready:function(cb){
    var target = document.querySelector('#textarea_content');
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          var added = mutation.addedNodes;
          for(var i = 0;i<added.length;i++){
            if((/sceditor-container/g).test(added[i].className)){
              cb();
            }
          }
           observer.disconnect();
        });    
    });
    var config = { attributes: true, childList: true, characterData: true };
    // pass in the target node, as well as the observer options
    observer.observe(target, config);
  }

回调未正确运行。

Answer 1

JavaScript是一种事件驱动语言。使用setInterval 可以工作。但也有事件驱动的解决方案：

使用敬畏的事件。我没有敬畏的经历，但也许你可以听到load或ready事件。
MutationObservers。这是一个本机API（所有现代浏览器都支持）。它允许您监听DOM的更改。在更改列表中查找您的节点。

Answer 2

如果您定位现代浏览器（＆gt; = IE 11），

MutationObserver是一个很好的解决方案。

以下是一个例子：

var parentDiv = document.createElement('div')

var observer = new MutationObserver(function (event) {
    console.log("childList changed");
    console.dir(event);
});

observer.observe(parentDiv, {
    childList: true
});

parentDiv.appendChild(document.createElement('div'))

否则您可以回退到使用setInterval

超出最大调用堆栈大小

2 个答案: