javascript - 使用 addEventListener 了解 javascript 回调

Question

我有一个由函数返回的对象文字，该对象又创建了一个 iframe，并在该 iframe 中加载 DOM 时执行一些操作。我希望能够在事件触发时“获取”回调返回的值。这是一个简化的对象:

var myFunc = function (url) {
  return {
      url: url,
      myMethod: function () {

          // some code here to create my iframe.

          var callbackFunc = function (event) {
             // do some stuff with the dom.
             return aValueAsynchronously;
          };

          var async = my_iframe.addEventListener("DOMContentLoaded", callbackFunc, true);
          my_iframe.src = this.url;
      }      
  }
}

读完这段代码后，我在它之外使用它:

var myValue = myFunc.myMethod('http://www.example.org');

当 example.org 在 iF​​rame 中加载完成时，会触发 DOMContentLoaded 回调，并返回值(经过一些逻辑之后)。如何将此值分配给 myValue (上面的行)？我知道我需要使用回调来做到这一点，但是在哪里以及如何？

Answer 1

首先，您所显示的代码无法由 myFunc.myMethod 调用，因为函数值没有 myMethod 属性。相反，函数返回具有该属性的对象。因此，首先您需要:

var myValue = myFunc('http://foo.com').myMethod();

但是，这只会调用设置回调的方法。要实际访问 aValueAsynchronously，您可以围绕该值创建一个闭包:

var myFunc = function(url){
  var aValueAsynchronously;
  return {
    val : aValueAsynchronously,
    myMethod: function(){
      var callback = function(evt){
        aValueAsynchronously = ...;
      };
      ...register your callback...
    }
  };
};

var obj = myFunc('http://foo.com');
obj.myMethod();
...some time passes, and eventually the callback occurs...
console.log( obj.val ); // This will be what was set in your callback

相反，我会亲自编写代码，以便我可以传入自己的回调以从 iframe 回调中执行，然后直接将特殊值传递给我的回调。 (这听起来很令人困惑；请参阅下面的代码。)这样您就不必等到该值变得可用，而是在它可用时收到通知:

var myFunc = function(url,whenDone){
  return {
    myMethod: function(){
      var callback = function(evt){
        var aValueAsynchronously = ...;
        whenDone(aValueAsynchronously);
      };
      ...register your callback...
    }
  };
};

var myObj = myFunc('http://foo.com',function(specialValue){
  // use specialValue here
});
myObj.myMethod(); // Go