JQuery

[Effect] JQ - Callback (콜백함수) ★ - 추가 호출 실행 함수

목차

  1. Callback 정의
  2. Callback 구문
  3. Callback 예제 - hide() 종료 후, alert 띄우기
  4. 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>


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
1/20
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인