通過addEventListener瞭解javascript回調

我有一個函數返回的對象字面值，反過來，這個對象創建一個iframe，並在該iframe中加載DOM時執行一些操作。我希望能夠在事件觸發時「獲取」回調所返回的值。這裏是一個簡化的對象：通過addEventListener瞭解javascript回調

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（上面的行）？我知道我需要使用回調來做到這一點，但在哪裏以及如何？

非常感謝您的幫助！

來源

2011-10-19 Loic Duros

首先，您顯示的代碼不能由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

來源

2011-10-19 02:12:30 Phrogz

感謝您的回答！我會嘗試你所描述的兩種解決方案，看看它是如何工作的！ :-) –

喜歡直接傳遞迴調值的第二種解決方案！它真正展現了JS的實力！再次感謝！ –

如果myvalue的所在範圍內callBack，只需分配給它。如果它不在範圍內，則必須作爲某個對象的屬性進行訪問，並且該對象的引用必須位於callBack的範圍內。

在簡單的情況下，如果myvalue的是全球性的，你期待的代碼在瀏覽器中運行，那麼回調可以設置window.myValue = ...;。否則，callBack需要將其作爲全局對象的屬性（相當於在瀏覽器中的窗口）訪問它。

所以在你的功能，你可能有：

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

     window.myValue = aValueAsynchronously; 

     return aValueAsynchronously; 
     };

還是我完全錯過了點？

來源

2011-10-19 02:18:36 RobG

謝謝，但我沒有在瀏覽器中運行這個！ Phrogz解決方案工作。 –

然後，您可以獲取對全局對象的引用，然後使用它。但是，我認爲Phrogz得到了它。 – RobG

通過addEventListener瞭解javascript回調

回答

相關問題