了解具有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完成在iFrame中的加载后，会触发DOMContentLoaded回调，并返回值（经过某种逻辑后）。如何获得将此值分配给myValue（上面的行）？我知道我需要使用回调来做到这一点，但是在哪里和如何进行？

Answer 1

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

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

Answer 2

如果myValue