>웹 프론트엔드 >JS 튜토리얼 >setTimeout_javascript 기술에서 지원되지 않는 jquery 선택기에 대한 솔루션

setTimeout_javascript 기술에서 지원되지 않는 jquery 선택기에 대한 솔루션

WBOY
WBOY원래의
2016-05-16 16:01:471373검색

오늘 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); 
  } 
); 

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.