onMouseout과 setTimeout 사용법

2015년 08월 28일

어려운 작업을 하시는군요. 쉬울 것 같지만 그리 쉽지 않습니다.

setTimeout 함수의 첫번째 인수에 this 객체를 인수로 받는 함수를 지정할 수 없거든요.

문자열로 setTimeout('namosw_cell_rollout(this)', 1000) 이렇게 주게되면

1초 후에 실행 시 this는 실행 전의 this가 아니게 되어버립니다.

1. 쉬운 방법은 숫자나 문자를 인수로 받는 함수를 작성하는 것입니다.

setTimeout('namosw_cell_rollout(99)', 1000);

setTimeout('namosw_cell_rollout("submenu01")', 1000);

이런 식이죠.

2. 한가지 방법이 더 있습니다. this를 사용할 수도 있는 방법입니다.

setTimeout(function (this) { do(this) }, 1000);

이와 같이 익명의 함수를 지정하는 방법입니다.

하지만 이 방법은 메모리가 해제되지 못하는 코드로 메모리가 낭비되는 코드이므로 사용에 주의가 필요합니다.

3. 나머지 방법 중 고급에 속하는 방법은 객체를 만들고 객체를 call 이나 apply 함수로 호출하는 코드를 작성할 수도 있습니다. 하지만 이 방법은 이와 같은 간단한 작업에 어울리지 않습니다. 주로 요즘 유행하는 여러 라이브러리에서 사용되는 방법입니다.

가장 쉬운 1번으로 예를 들어보일게요.

다음은 메뉴를 구성하는 HTML입니다.

질문자님의 코드와 비슷하지만 각 메뉴에 id 속성이 지정되어 있고,

이벤트에서 이 id와 연관된 숫자를 인수로 호출하는 것을 눈여겨 봐주세요.

<table border="1" id="s1" style="display:none"><tr><td>Submenu 01</td></tr></table>
<table border="1" id="s2" style="display:none"><tr><td>Submenu 01</td></tr></table>
<table border="1" id="s3" style="display:none"><tr><td>Submenu 01</td></tr></table>

다음은 스타일시트입니다.

예를 들기위해 이미지가 아닌 배경색을 사용했습니다.

다음은 스크립트.

setTimeout('doHideMenu(' + idx + ')', 1000); 와 같이 인수로 전달받은 idx로 하나의 문자열을 만들어 호출하는 것을 눈여겨 봐주세요.

  function hideMenu(idx) {
   setTimeout('doHideMenu(' + idx + ')', 1000);
  }

  function doHideMenu(idx) {
   document.getElementById('m' + idx).className = '';
   document.getElementById('s' + idx).style.display = 'none';
  }
</script>

질문자님의 의도대로 작동하나요?

혹시 이상하다면 추가 의견에 남겨주시면 확인하는대로 추가답변 드릴게요~

홈페이지 제작팁

onMouseout과 setTimeout 사용법

Login