Question

我希望有一个泛型使用函数来传递动态创建的对象作为参数，并在没有jQuery的情况下准备对象时运行回调函数。该对象应该是全局函数，HTML元素或普通全局对象。

在下面的示例中，我动态创建对象，但在动态创建它们之后永远不会找到它们。我知道我正在传递对一个永远不会在检查器循环中找到的不存在的对象的引用。但我想要的正是下面的内容 - 检查函数，对象或HTML元素何时存在并运行回调。

<html>
  <head>
    <script type="text/javascript">
      !function() {
        var interval = 1000,
            timeout = 30000;

        var onElementReady = function(obj,callback){
            console.log('onElementReady '+obj)
            //obj=window.dynamicFunction;
            var elementChecker = setInterval(function () {
                console.log('object exists? '+obj)
                if ('undefined' !== typeof obj) {
                    clearInterval(elementChecker);
                    callback();
                }
            }, interval); 
        };

        var init = function(){
            console.log('Element is found!')
        };

        onElementReady(window.dynamicFunction, init);
        //onElementReady(document.getElementById('test2'), init);
        //onElementReady(myObject, init);
    }();

    setTimeout(function(){
        console.log('adding dynamicFunction');
        dynamicFunction = function(){};
    }, 10000);

    setTimeout(function(){
        console.log('adding global object myObject');
        myObject = {foo:'boo'};
    }, 5000);

    setTimeout(function(){
        console.log('adding test2');
        document.getElementById('test1').id = "test2"
    }, 5000);
    </script>
  </head>
  <body>
    <div id="test1"></div>
  </body>
</html>

Answer 1

将func传递为字符串

onElementReady("window.dynamicFunction", init);

然后使用eval检查函数是否确实存在：

var onElementReady = function(obj,callback){
           console.log('onElementReady '+obj)
           //obj=window.dynamicFunction;
           var elementChecker = setInterval(function () {
                console.log('object exists? '+obj)
                //eval("var check = typeof "+obj  );
                eval("var check = "+obj+" && typeof "+obj  );

                if ('undefined' !== check) {
                    clearInterval(elementChecker);
                    callback();
                }
            }, interval); 
        };

已编辑也许现在可以使用

Answer 2

您需要将字符串传递给该函数。否则，它将持续测试undefined。

在函数中，您可以使用括号表示法在window内测试对象的存在。

您可以使用document.getElementById测试动态创建的ID元素：

var onElementReady = function(obj, callback) {
  if(window[obj] || document.getElementById(obj)) {
    if(typeof window[obj] === 'function') {
      window[obj]();
    }
    if(callback) {
      callback();
    }
  }
  else {
    setTimeout(function(){
      onElementReady(obj, callback)
    },1000);
  }
} //onElementReady

onElementReady('newfunc');

onElementReady('newelement',
  function(){alert('New paragraph created!')}
);

onElementReady('globvar',
  function(){alert('New global variable:\rglobvar = '+globvar)}
);

var newfunc = function() {
  alert('It lives!');
}

document.body.innerHTML= '<p id="newelement">Some paragraphs are dynamic.</p>';

setTimeout(function() {
  globvar = Math.random();
},2000);

检查对象，功能或元素何时准备就绪

2 个答案: