마우스가 실제로 나가기 전에 Mouseout 이벤트가 발생합니다.

Question

mouseover/mouseout 처리기가 있습니다. 둘 다 Javascript 시간 초과를 사용하여 작업을 지연시킵니다. 그러나 마우스가 선택 도구 위에있을 때에도 mouseout 이벤트가 트리거됩니다. mouseout 스크립트에서 타임 아웃을 해제하면 정상적으로 작동합니다. 그래서 나는 타임 아웃에 대해 뭔가 잘못했다고 가정합니다. 내가 대신 마우스 오버 /로 마우스의 호버 핸들러를 사용하는 경우

 $('.selector').live({mouseover : function() { 
      var timeout = setTimeout(function() { 
     $('.something').show(); 
      }, 1000); 
    }, mouseout: function() { 
      timeout = setTimeout(function() { 
     $('.something').hide();  
      }, 2000); 
    } 
     }); 

같은 것은 같은 일이 발생합니다. 그리고 두 개의 타임 아웃에 대해 다른 변수 이름을 사용하거나 동일한 타임 아웃을 지우고 다른 타임 아웃을 호출하면 똑같은 일이 발생합니다. 내가 뭘 잘못 했니?

Answer 1

시간 초과없이 정상적으로 작동하므로 mouseover/mouseleave 대신 mouseover/mouseout이 올바른 이벤트라고 가정합니다. 당신은 여기 저기 발사되어 지속적으로 여러 시간 제한을 요구하고있다

, 당신은 한 번에 하나의 일이 타이밍 단일 타이머를 사용해야합니다

(function() { 
var timeout = 0; 
    $('.selector').live({ 
    mouseover: function() { 
    window.clearTimeout(timeout); 
     timeout = setTimeout(function() { 
     $('.something').show(); 
     }, 1000); 
    }, 
    mouseout: function() { 
    window.clearTimeout(timeout); 
     timeout = setTimeout(function() { 
     $('.something').hide(); 
     }, 2000); 
    } 
    }); 
})() 

window.setTimeout는 그냥 평범한 정수를 반환 . window.setTimeout으로 전화 할 때마다 반환 값이 할당 된 변수에 관계없이 새 타이머가 만들어집니다. window.setTimeout의 리턴 값은 특정 타이머를 지우기 위해 사용될 수 있습니다.

부작용으로 인해 존재하지 않는 시간 제한을 지울 수 있습니다. 예를 들어 :

jQuery("div").fadeOut(15000); 

var l = 10000; 

while(l--) window.clearTimeout(l); 

당신은 페이드 아웃 정지의 jQuery FX 내부 타이머를 가지고, 10000 개 다른 타이머 ID를 강요하고 그들에게 모든을 삭제 짐승이다. 데모 용으로 만 실제 코드로 사용하지 마십시오.

Answer 2

타임 아웃이 중복되지 않도록 지워야합니다.

var timeout = null; 
$('#foo').live({ 
    mouseover: function() { 
     if(timeout !== null){ 
      clearTimeout(timeout); 
      timeout = null; 
     } 
     timeout = setTimeout(function() { 
      $('#bar').show(); 
     }, 1000); 
    }, 
    mouseout: function() { 
     if(timeout !== null){ 
      clearTimeout(timeout); 
      timeout = null; 
     } 
     timeout = setTimeout(function() { 
      $('#bar').hide(); 
     }, 2000); 
    } 
}); 

데모

: FF에서 http://jsfiddle.net/46mFc/1/