JQuery를 만져보면서 참 많은 생각이 든다.
생겨난지도 꽤 되었고, 현재는 많은곳에서 쓰이는 언어이지만 아직 매우 불안정한 언어인것은 확실하다.
그 수많은 이유중 하나가 바로 hover이벤트의 치명적 오류다.
<script type="text/javascript">
$("html").hover(function() {
$(this).animate({
backgroundColor: "#555",
color : "#fff"
}, 1000);
}, function(){
$(this).animate({
backgroundColor: "#555",
color : "#fff"
}, 1000);
});
</script>
위의 코드는 html화면 자체에 마우스를 올릴경우 글자를 파란색으로 바꾸고, 다시 떼어냈을때 검은색으로 변하게 하는 함수다.
이 코드를 그대로 갖다붙여넣기만 해도 작동이 잘 된다.
당장에 코드만 보아도 전혀 이상이 없는, 모든 웹사이트에서 사용하는 표준을 따라쓰고있다.
즉, 코드상 아무 문제가 없다.
하지만 제이쿼리 언어 자체의 치명적인 단점이 나타난다.
단순히 html상에 마우스를 올렸을 경우 이벤트가 시작하며, 떼었을 경우 종료하기는 하지만 이벤트가 진행되고 있을때 마우스를 제빨리 나갔다가 들어오는것을 반복하면 그 이후에는 마우스가 hover상태가 아니어도 이벤트가 혼자 여러번 진행되는 현상이 발생한다.
개발자 입장에선 참 난해한 현상이 아닐 수 없다.
이런것까지 꼼꼼히 신경쓰는 개발자가 아닌이상 대부분은 그냥 이렇게 두기 마련이지만.. 필자는 이런 오류들은 극히도 싫어하므로, 의외로 간단하게 바꿀 수 있는 방법을 제시한다.
var a = $("html");
$("html").mouseover(function() {
if($("html").is(':animated'))
{
$(this).animate({
backgroundColor: "#555",
color : "#fff"
}, 1000);
}
});
$("html").mouseout(function() {
$(this).animate({
backgroundColor: "#fff",
color : "#000"
});
});
제이쿼리 코드의 구독성을 높여줄 컨텐츠가 아직 없기에 이렇게밖에 보여주진 못하지만 어차피 필요없다. 핵심만 알면 되니까
if($("html").is(':animated')) {}
이 코드가 바로 핵심이다.
어떤 언어를 배웠든간에 바로 알 수 있을 간단한 문장인데,
if문이 시사하는 조건은
html태그가
.is(':animated')되었을 경우,
즉 애니메이션이 실행되고 있는 상태인 경우 hover를 무시한다.
