jQuery 이펙트(Effect) - Callback(콜백)

자바스크립트는 줄 단위로 실행합니다. 하지만 여러가지 효과들은 효과가 끝나기 전에 다음라인을 수행합니다.

이러한 것으로 인해서 오류가 일어날 수 있습니다.

콜백은 효과가 모두 종료되어야 실행됩니다.

지금까지 보았던 이펙트 관련된 것들을 보면 callback 이라는 부분이 있습니다.

이곳에 필요한 것들을 넣어주게 됩니다.

$(selector).hide(speed, callback); 

 

직접 동작을 보는게 좋겠죠. 대가리(head)를 만듭니다.

$(document).ready(function(){ 	$("button").click(function(){ 		$("p").hide("5000",function(){ 			alert("The paragraph is now hidden"); 		}); 	}); }); 

 

본문(body)는 다음과 같이 작성합니다.

숨어라

콜백입니다. 콜택시가 아닙니다.

 

비교를 해봐야하기 때문에 html 문서를 하나더 만듭니다.

본문(body)는 동일하고 머리(head)만 조금 다르게 작성합니다.

$(document).ready(function(){ 	$("button").click(function(){ 		$("p").hide(5000); 		alert("The paragraph is now hidden"); 	}); }); 

 

두 문서를 각각 브라우저에서 실행해봅니다.

첫번째 문서는 버튼을 누르면 숨기기 효과가 진행됩니다. 그것이 완료되면 창이 하나 뜹니다.

두번째 문서는 버튼을 누르면 바로 창이 뜨고 효과가 진행됩니다.