[jQuery Callback Functions]
javascript 구문은 줄단위로 되는데, 애니메이션의 경우에는 애니메이션이 끝나지 않아도 다음 행의 코드가 수행될 수 있기 때문에 에러가 날 수도 있다.
이런 경우를 방지하기 위하여 콜백함수를 사용한다.
콜백함수는 현재의 애니메이션(혹은 효과)이 끝난 후에야 실행된다.
[jQuery Callback Example]
기본적인 문법은 :
$(selector).hide(speed,callback)
콜백 변수에는 감추기 효과가 끝난 후에 수행될 함수가 실행된다.
hide효과를 예를 들기 위하여 사용하였을 뿐, $(document).ready(callback) 와 같이 사용해도 된다.
아래의 예로 확인하여 본다.
ex1) 콜백함수가 있는경우
<head>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("hide효과가 끝난 후에 alert창이 떴죠!");
});
});
});
</script>
</head>
<body>
<button>감추기</button>
<p>요기가 사라지겠죠</p>
</body>
</html>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("hide효과가 끝난 후에 alert창이 떴죠!");
});
});
});
</script>
</head>
<body>
<button>감추기</button>
<p>요기가 사라지겠죠</p>
</body>
</html>
ex2) 콜백함수가 없는 경우
<head>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("hide효과가 끝난 후에 alert창이 떴죠!");
});
});
</script>
</head>
<body>
<button>감추기</button>
<p>요기가 사라지겠죠</p>
</body>
</html>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("hide효과가 끝난 후에 alert창이 떴죠!");
});
});
</script>
</head>
<body>
<button>감추기</button>
<p>요기가 사라지겠죠</p>
</body>
</html>
위의 소스를 실행하여 보면 예제1)의 경우 버튼 클릭 후 <P>태그 사이의 글이 사라진 후 경고창이 발생하지만, 예제2)의 경우 버튼 클릭 후 <P>태그의 글이 사라지는 도중에 경고창이 발생한다.
원본 : http://blog.naver.com/topsaga?Redirect=Log&logNo=140155551418
'Programming > JQuery' 카테고리의 다른 글
| jQuery Traverse - Miscellaneous Traversing (0) | 2012.04.20 |
|---|---|
| jQuery Traverse - Filtering (0) | 2012.04.19 |
| jQuery Ajax memory leak (0) | 2012.04.05 |
| jQuery Ajax 에러 처리 (0) | 2012.04.05 |
| jQuery Ajax 한글자료 넘김 처리 - jsp, java (0) | 2012.04.05 |
