의 setTimeout 함수를 실행하지 않습니다

Question

심지어이 쳐다 보면서이 솔루션은 여전히 ​​나에게 도움이되지 않았다 : Execute a function after X seconds in jquery 여기

내 코드입니다 :

// featured bounce 
$('#featured .animated').hover(function() { 
    $(this).addClass('bounce'); 
    setTimeout(function(){ 
     $(this).removeClass('bounce');}, 
     1300 
    ); 
}); 

는 클래스 작품의 추가하지만, setTimeout 시련은 작동하지 않습니다. 실행되지도 않고 자바 스크립트 오류가 Chrome 콘솔에 표시되지 않습니다.

이

"애니메이션 바운스"

그리고 애니메이션이 재생하지만, 그때는 제거하지 마십시오 : 나는 모든 것이 올바르게 입력해야 같은 느낌 있습니다 .. addClass() 후 .animated 개체의 클래스는 다음과 같습니다 클래스 속성에서 "바운스".

어떤 도움이 필요합니까?

Answer 1

범위가 예상되는 요소가 아닌 창을 가리키고 있습니다.

$('#featured .animated').hover(function() { 
    var elem = $(this); 
    elem.addClass('bounce'); 
    setTimeout(function(){ 
     elem.removeClass('bounce');}, 
     1300 
    ); 
}); 

Answer 2

$('#featured .animated').hover(function() { 
    $(this).addClass('bounce'); 
    (function(that) { 
     setTimeout(function(){ 
      // use `that` instead of `this` 
      $(that).removeClass('bounce'); 
     }, 1300); 
    })(this); //pass `this` into this function 
}); 

Answer 3

제대로 Function.prototype.bind를 사용하면 싼 상황이 var that = this 같은 해킹 방지 할 수 있습니다.

// featured bounce 
$('#featured .animated').hover(function() { 
    var elem = $(this); 
    elem.addClass('bounce'); 
    setTimeout(elem.removeClass.bind(elem, 'bounce'), 1300); 
}); 

사이드 노트 : Function.prototype.bind는 ES5 추가 기능이며 브라우저 지원을 고려해야합니다. 이 기능에 대한 MDN 기사 하단의 호환성 표를 참조하십시오.