본문 바로가기

Programming/JQuery

jQuery Callback Functions

[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>

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>

 

위의 소스를 실행하여 보면 예제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