목차
Callback 정의 Callback 구문 Callback 예제 - hide() 종료 후, alert 띄우기 jQuery Callback 함수 사용 안 한 경우
Callback 정의
현재 메서드 작동 종료 후, 추가로 실행할 함수.
PS. 콜백 존재 계기.
JS는 원래 한줄 한줄 실행시키는데,
간혹, 앞 줄 작동 안 끝났는데 추가로 새로운 작동 시작될 시 에러 발생 가능.
이런 에러 방지 위해 고안된 게, 콜백함수임.
Callback 구문
$("selector ").method (...., callback );
[매개변수]
selector
선택자
method
기본 실행 메서드.
...
method 에 필요한 매개변수들.
callback method 동작 종료 후 호출해서 실행시킬 함수.)
[구문 의미]
selector 에 대해 mathod 먼저 작동시킨 후,
method 가 완전히 종료되면 callback 실행.
Callback 예제 - hide() 종료 후, alert 띄우기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("주소 숨었지롱.");
});
});
});
</script>
<style>
p {
width:200px;
height:100px;
line-height:100px;
text-align:center;
border:1px solid silver
}
</style>
<button>감추기</button>
<p>홈짱닷컴 Homzzang.com</p>
※ 콜백 함수 사용하면, hide 메서드 효과가 끝나야 alert 경고창이 뜸.
cf.
jQuery Callback 함수 사용 안 한 경우
※ 숨기기 메서드 종료 전에 경고창이 먼저 뜸.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
alert("주소 숨었지롱.");
;
});
});
</script>
<style>
p {
width:200px;
height:100px;
line-height:100px;
text-align:center;
border:1px solid silver
}
</style>
<button>감추기</button>
<p>홈짱닷컴 Homzzang.com</p>
