출처 : https://www.w3schools.com 사이트의 내용을 공부하며 정리하고 있다.

콜백 함수는 현재 효과가 완전히 끝난 뒤에 실행된다. 


자바스크립트는 문장들을 라인 대로 실행한다. 효과를 넣었을 때

효과가 끝나기 전에 다음 라인의 코드가 실행되는 것을 예방하기 위해

콜백 함수를 사용한다. 


Typical syntax: $(selector).hide(speed,callback);



만약 콜백 파라미터를 사용하지 않으면 이벤트 실행 전에 alert창이 

뜰 수 있다. 


ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide(1000);
        alert("The paragraph is hidden late");
    });
});
</script>
</head>
<body>
 
<button>Hide</button>
 
<p>This is a paragraph with little content.</p>
 
</body>
</html>
 
cs



콜백함수의 사용

ex)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide("slow", function(){
            alert("The paragraph is hidden early");
        });
    });
});
</script>
</head>
<body>
 
<button>Hide</button>
 
<p>This is a paragraph with little content.</p>
 
</body>
</html>
 
cs


hide 효과가 다 끝난 뒤에 alert 창이 뜬다. 

저작자표시 비영리 변경금지

'문돌이의 IT > jQuery' 카테고리의 다른 글

jQuery - Add Elements  (0) 2017.08.13
jQuery - Set Content and Attributes  (0) 2017.08.12
jQuery Effects 제이쿼리 효과 - Animate (1)  (0) 2017.08.11
jQuery Effects 제이쿼리 효과 - sliding  (0) 2017.08.10
jQuery Effects 제이쿼리 효과 - fade  (0) 2017.08.09

+ Recent posts

티스토리툴바