블로그옮김글] jQuery -complete의 Callback 시점, 그리고 함수의 return 시점과 callback 의 시점 차이 - jQuery & Javascript & CSS



jQuery 에서 animate, show, hide 등의 method 에서 마지막 부분의 옵션으로 

해당 메서드 효과 완료시 동작할 callback 함수를 정의하는 부분이 있다.

 

즉, show 같은 경우에는 해당 요소의 애니메이션 효과가 끝난(display:block 된 이후) 이후 

callback 이 실행한다.

 

다음과 같은 소스가 있다고 하자.

(본래 사용된 소스에는 아래 적은 소스 외에도 다른 기능이 들어가 있다.

가령, 스크롤의 위치에 따른 작동 설정이라던가, 다른 부분이 완료 후에 작동하게 한다거나...

아래 소스는 callback 시점만을 확인하기 위해 몇몇 부분을 생략한 소스이니 

실 사용하게 될 경우 참고 바란다.)

 

 

function secondScroll(){

$("#willhidden").show("slow",function(){

alert("animate complte");

});

 

}

$(window).scroll(function(){

secondScroll()

});

 

위의 소스는 스크롤 작동 시 secondScroll 함수를 호출하고, #willhidden 요소가 show 완료될 경우 

animate complete라는 경고가 뜨게끔 했다.

 


첫번째 사진을 보듯이, 처음에는 display: none 이다가,

두번째 사진을 보면, show()에 의해 display:block;이 된다.하지만 show의 애니메이션 효과가 진행되는 중이다.

마지막 사진을 보면, 애니메이션 효과가 끝났을 때 alert 메시지가 뜬다. 즉, show 효과가 끝난 시점에야

callback 이 실행되는 것을 알수 있다.

 

 

 

 

그렇다면 show()를 포함한 함수에서의 return 은 callback 이후에 가는 것일까??

확인하기 위해 아래와 같이 소스를 수정하자.

 

 

function secondScroll(){

$("#willhidden").show("slow",function(){

alert("2test - animate complete");

});

return "return complete";

 

}

$(window).scroll(function(){

alert(secondScroll());

});

 

함수의 return 값을 show() 의 바깥에 위치 시켰다.

만약, 순차적으로 show가 끝난 다음에 return 이 된다면 

animate complete 가 출력 후 "return complete"라는 alert이 떠야 한다.

 

 

 

 

사진을 보면 알 수 있듯이, 

함수의 return 은 show가 끝나기 전에 return 을 반환하고, 

show 는 그 이후에 callback 을 호출한다. 

 

즉, jquery(javascript)는 show를 실행 시킨후 

완료 여부와 없이 함수 return 및 다른 부분을 실행 시킨다는 것이다.

 

 

 

따라서, 

 

만약 소스를 짤때,

show, hide, animate등의 효과 이후의 순차적으로 

다음 작업을 원할 경우, 

위의 callback 함 수 내에 return 값을 넣거나 다른 함수 호출 등의 작업을 해서 

진행이 될 수 있도록 해야 한다.

 

 

 

function secondScroll(){

$("#willhidden").show("slow",function(){

alert("2test - animate complete");

return "return complete";//call back 내 포함

//somefunction(); //callback 내 포함

});

 

}

$(window).scroll(function(){

alert(secondScroll());

});

[출처] jQuery -complete의 Callback 시점, 그리고 함수의 return 시점과 callback 의 시점 차이|작성자 혀비





AD_1