setTimeout을 사용하여 객체에서 메서드를 실행할 수 있습니까?

Question

짧은 지연 후 mouseleave 이벤트가 발생할 때 풀다운 메뉴를 닫고 싶습니다. 하지만 문제가 발생했습니다.

는 객체에서 다음과 같은 방법을 고려 : (내가 jQuery를 사용하고 있습니다)

myObj = {}; 

myObj.message = "woot!"; 

myObj.bindEvents = function() { 

     var that = this; 

     $("#menuPanel") 
      .bind("mouseleave", function() { 

        that.timer = setTimeout(that.closeMenu,500); 

      }); 

    } 

myObj.closeMenu = function() { 

    // close the menu 

    alert(this.message); 

} 

이 작동하지 않습니다. 즉,이 메시지는 정의되지 않은 것으로 나타납니다. 약간의 파기 후, 나는 그 이유를 이해한다. :) '해당'참조는 실행시 setTimeout 내부의 코드에서 사용할 수 없습니다.

이런 유형의 문제를 해결하는 "최선의"방법은 무엇입니까? 어떻게하면 setTimeout을 사용하는 메서드가 같은 개체의 다른 메서드를 호출 할 수 있고 개체의 속성에 계속 액세스 할 수 있습니까?

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

Answer 1

여기에서 문제는 개체에서 closeMenu 메서드를 분리한다는 것입니다. 당신이 이런 짓을하는 경우 같은 문제가있을 것입니다 :

var closeMenu = myObj.closeMenu; // detaching the method from the object 
closeMenu(); 

탈착이 같은 메소드를 호출하는 것은 더 이상 그들이에 생성 된 개체에 적용 의미합니다.

// Setting the first parameter of setTimeout to be the detached closeMenu method 
that.timer = setTimeout(that.closeMenu,500); 

는 첫 번째 방법에 대한 수정이 call 또는 apply 방법을 사용하는 것입니다 : 당신의 예에서, 당신은 거의 같은 일을하고있는

var closeMenu = myObj.closeMenu; // detaching the method from the object 
closeMenu.apply(myObj); 

을하지만 그것은을 위해 작동하지 않을 것입니다 타이머. 대신, 익명 함수 작성 :

that.timer = setTimeout(function() { that.closeMenu(); },500); 

---

는 또한 bind()을 언급 할 가치가있을 수도를 - 가장 인 프로토 타입 (각종 블로그 및 일부 라이브러리에 주위에 떠있는 됐어요 방법 - jQuery의 $('#selector').bind()와 혼동하지 주목할만한) 잠시 동안 지금은 ECMAScript edition 5에 구현되었습니다. 그냥 일을 더 쉽게 만들기 때문에

that.timer = setTimeout(that.closeMenu.bind(that),500); 

나는, 내가 만든 하나 개 또는 두 개의 클래스에 유사한 방법을 사용합니다.