오늘 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);
}
); 위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
