javascript 순서대로 실행시키기, jquery 효과, 애니메이션 실행순서 차례로.... Callback 함수

javascript실행순서, 애니메이션 실행순서

 

javascript 는 코딩된 라인 순서대로 실행되는게 원칙이지만, 간혹, 앞서 기입한 명령이나 함수의 실행이 끝나기도 전에 다음 번 라인이 실행되는 경우가 있습니다.

 

 

아래 코드를 실행시키면,   $("p").hide(1000);   이 라인이 실행된 후에   alert("숨기기 완료");   이 라인이 실행되는 순서로 되어있지만,  실제로는 $("p").hide(1000); 의 실행이 시작되자 마자 alert() 함수가 실행되게 됩니다. 마치, 윈도우에서 여러 프로그램을 실행시킬때 쓰레드를 사용하는것 처럼, javascript 도 여러줄의 명령이 실행되는 경우 실행되는 순서는 지키지만 앞선 라인의 실행이 끝난는지는 상관하지 않게됩니다. 

 

<script language = "javascript">

$("button").click(function(){ 
  $("p").hide(1000); 
  alert("숨기기 완료"); 
});

</script>

 

<button>숨기기</button>

 

<p>동해물과 백두산이</p>

 

 

 

예를들어, 아래와 같이 사다리타기 게임을 jquery 애니메이션 효과를 이용하여 만들었다고 하면, 첫번째 애니메이션이 끝난후에 다음 애니메이션이 시작되어야 제대로 보이게 될것입니다.

 

javascript실행순서, javascript순서, javascript효과순서

 

 

이럴 때 사용할수 있는 것이 바로 콜백함수(Callback Function) 입니다. 콜백함수는 앞선 명령이 완전히 종료된 이후에 실행되게 됩니다. 아래와 같이 사용하면 됩니다. 

 

$("button").click(function(){
  $("p").hide("slow", function(){
    alert("숨기기 완료");
  });
});

 

<button>숨기기</button>

 

<p>동해물과 백두산이</p>

 

즉, $(selector).hide(speed,callback);  와 같이 callback 위치에 함수를 적어주면 됩니다. 

 

 

 

위의 예를 좀더 명확하게 하기 위하여 아래와 같이 코딩후에 실행시켜 보면, 3초동안 hide 가 실행되기를 기다렸다가 '실행완료' alert이 뜨는걸 확인할 수 있습니다

 

 

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(3000,function(){alert('실행완료')});
    alert("실행시작");
  });
});

 

 

위와 같이 실행시키면 '실행시작' 이 먼저 alert 되고, '실행완료' 는 hide 함수에 기입된 3초동안 숨겨진 후에 '실행완료' 메시지를 alert 하게 됩니다