addEventListener로 자바 스크립트 콜백 이해하기

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'); 

을하고 iframe에로드가 완료되어 example.org는 DOMContentLoaded 콜백 트리거되고, 값 (일부 로직 이후)이 리턴됩니다. 이 값을 myValue (위의 줄)에 할당하려면 어떻게해야합니까? 내가 콜백을 사용해야한다는 것을 이해하지만, 어디서 어떻게?

도움을 주셔서 감사합니다.

Answer 1

첫 번째로 표시 한 코드는 myFunc.myMethod으로 호출 할 수 없습니다. 함수 값에 myMethod 속성이 없기 때문입니다. 대신 함수 은을 해당 속성을 가진 개체로 반환합니다. 따라서 시작하려면 다음을 수행해야합니다.

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

그러나 콜백을 설정하는 메소드 만 호출합니다. 내가 iframe이 콜백에서 실행하기 위해 내 자신의 콜백에 전달할 수 있도록 제가 개인적으로 코드를 작성합니다,하지만 대신 그

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 

: 실제로 aValueAsynchronously에 액세스하려면 그 값 주위에 폐쇄를 만들 수 있습니다 , 특별한 값을 콜백에 직접 전달하면됩니다. (. 그것은 혼란 소리, 아래의 코드를 참조) 값을 사용할 수있을 때까지 기다릴 필요가 없습니다 그 방법이 아니라 당신은 때 알림을받을 : myValue는 에 대한 범위에

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

경우 callback, 그냥 할당하십시오. 범위에없는 경우 일부 개체의 속성으로 액세스해야하며 해당 개체에 대한 참조는 콜백의 범위에 있어야합니다. 간단한 경우

, myValue 글로벌이며 다음 콜백는 window.myValue = ...;을 설정할 수 있습니다, 브라우저에서 실행하는 코드를 기대합니다. 그렇지 않은 경우 콜백은 전역 개체의 속성으로 액세스해야합니다 (브라우저에서는 과 같습니다).

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

     window.myValue = aValueAsynchronously; 

     return aValueAsynchronously; 
     }; 

을 아니면 내가 완전히 지점을 놓친 :

그래서 함수에 당신은 할 수 있는가?