동일한 유형의 여러 객체의 메소드에서 setTimeout

Question

동일한 유형의 객체의 메소드에서 "setTimeout"을 사용하는 데 도움이 필요합니다. 내가 그들을 사용하는 HTML 코드에서 어딘가에

obj1 = new myObject('Something here'); 
    obj2 = new myObject('Something else here'); 

:

<button onclick="obj1.show()">Something here</button> 
    <button onclick="obj2.show()">Something else here</button> 

은 사용자가 하나를 누르면 내가 2 개체가

function myObject(param){ 

     this.content = document.createElement('div'); 
     this.content.style.opacity = 0; 
     this.content.innerHTML = param; 

     document.body.appendChild(this.content); 

     this.show = function(){ 
      if(this.content.style.opacity < 1){ 
       this.content.style.opacity = (parseFloat(this.content.style.opacity) + 0.1).toFixed(1); 
       that = this; 
       setTimeout(function(){that.show();},100); 
      } 
     } 

     this.hide = function(){ 
      if(this.content.style.opacity > 0){ 
       this.content.style.opacity = (parseFloat(this.content.style.opacity) - 0.1).toFixed(1); 
       that = this; 
       setTimeout(function(){that.hide();},100); 
      } 
     } 
    } 

어딘가에 : 내 객체를 시작하려면이 코드를 사용 버튼을 누르면 모든 것이 정상적으로 작동하지만 사용자가 하나의 버튼을 누르고 짧은 시간 간격 후에 다른 버튼을 누르면 첫 번째 버튼에 의해 트리거 된 액션이 중지되고 두 번째 버튼의 액션 만 실행됩니다 에드. 전역 변수 "that"이 두 번째 객체의 참조가된다는 것을 알고 있지만 이전에 호출 된 메소드를 차단하지 않는 자동 메커니즘을 만드는 방법을 알지 못합니다. 내가 어떤 실수를하는 경우

내 영어 사전 미안에 감사 : P

Answer 1

이런 식으로 처리하는 데는 여러 가지 방법이 있습니다. 여기에는 내 머리 꼭대기에있는 것이 하나 있습니다.

우선, 당신은 익명의 함수를 작성하여 setTimeout 내부에 두는 것을 보았습니다. 내 객체의 메서드를 해당 범위에 바인딩하고이를 setTimeout에 보내는 것이 더욱 멋지다. 히치 팅을하는 방법은 많지만 곧 bind()가 표준이됩니다 (you can write this into your own support libraries yourself for browser compatibility). 이 방법을 사용하면 변수를 자신의 범위 (전역 변수의 "그"변수가 없음)로 유지하고 이와 같은 버그를 피할 수 있습니다. 예를 들면 다음과 같습니다.

function myObject(param){ 

    // ... snip 

    this.show = function(){ 
     if(this.content.style.opacity < 1){ 
      this.content.style.opacity = (parseFloat(this.content.style.opacity) + 0.1).toFixed(1); 
      setTimeout(this.show.bind(this),100); 
     } 
    } 

    this.hide = function(){ 
     if(this.content.style.opacity > 0){ 
      this.content.style.opacity = (parseFloat(this.content.style.opacity) - 0.1).toFixed(1); 
      setTimeout(this.hide.bind(this),100); 
     } 
    } 
} 

둘째, 애니메이션 처리 방법을 개체에 추가하려고합니다. setTimeout은 예약 된 콜백을 취소하는 데 사용할 수있는 핸들을 반환합니다. this.registerTimeout() 및 this.cancelTimeout()과 같은 것을 구현하면 한 번에 한 가지만 수행하고 설명하는 것과 같은 열광적 인 사용자가 클릭하면 코드의 동작을 차단할 수 있습니다.

Answer 2

당신을 취소 할 뭔가가 필요하면, 대신의 setTimeout의 window.setInternal을 사용합니다. 하여 setInterval은 나중에 간격을 취소하는 데 사용할 수있는 간격에 대한 핸들을 반환

그래서 여기에서

var global_intervalHandler = window.setInterval(function() { ... }, millisecondsTotal); 

// more code ... 

// later, to cancel this guy: 

window.clearInterval(global_intervalHandler); 

난 당신이 당신의 자신의 자기 만료 작업을 확인하기 위해 엔지니어링 기술과 창의력을 사용할 수 있습니다 확신 - 만약 그들이 실행하고 성공적으로 완료 (또는 심지어 성공적으로) 그들은 자신의 간격을 취소합니다. 다른 프로세스가 개입하면 간격을 먼저 취소하고 해당 동작을 중지 할 수 있습니다.

Answer 3

글로벌 변수로 필요합니까? var that = this;으로 변경하면 함수 컨텍스트의 내부 변수를 사용하게됩니다.