javascript - 超出最大调用堆栈大小

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 就绪函数中，如下所示

 $(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可以工作。但也有事件驱动的解决方案:

1. 出于敬畏而使用事件。我没有使用 awe 的经验，但也许您可以收听 load 或 ready 事件。

2. 突变观察者。这是一个 native API(所有现代浏览器都支持)。它允许您监听 DOM 的更改。在更改列表中查找您的节点。