오늘 js 지연 이벤트를 작성할 때 setTimeout 메서드에서 jquery의 $(this)를 사용하는 것이 작동하지 않는다는 것을 발견했습니다. 다양한 테스트를 거친 후 마침내 jquery의 선택기가 setTimeout에서 지원되지 않는다는 결론을 내렸습니다. 그래서 QQ의 jquery 개발 전문가들에게 조언을 구했고, 그들은 즉시 문제를 해결했습니다. 여기에 기록하겠습니다.
다음은 작성자가 지연 처리 시 사용한 js 코드입니다.
$('.dl_select dt').hover( function(){ clearTimeout(t3); $(this).siblings('dd').css({'display':'block','cursor':'pointer'}); }, function(){ t2=setTimeout(function(){$(this).siblings('dd').css({'display':'none'});},300); } ); $('.dl_select dd').hover( function(){ clearTimeout(t2); $(this).css({'display':'block','cursor':'pointer'}); }, function(){ t3=setTimeout(function(){$(this).css({'display':'none'});},200); } );
위 코드에서 setTimeout에 있는 코드에 주의하세요. 이 메소드에 이러한 코드가 없으면 자체에는 문제가 없으나, 이 경우 오류가 발생합니다. 그 이유에 대해서는 작가가 아직까지 파악하지 못했습니다. 네티즌들의 깨달음을 얻은 후 다음과 같이 변경했는데 방법이 매우 영리합니다. 올바른 코드는 다음과 같습니다.
$('.dl_select dt').hover( function(){ clearTimeout(t3); $(this).siblings('dd').css({'display':'block','cursor':'pointer'}); }, function(){ var $this=$(this).siblings('dd'); t2=setTimeout(function(){$this.css({'display':'none'});},300); } ); $('.dl_select dd').hover( function(){ clearTimeout(t2); $(this).css({'display':'block','cursor':'pointer'}); }, function(){ var $this=$(this); t3=setTimeout(function(){$this.css({'display':'none'});},200); } );
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.