[javascript] jQuery + html5 에서 스크립트 실행순서

Jquery + html5 에서 스크립트 실행순서 컨트롤 하기. 

스크립트에서 실행 순서를 컨트롤 해야할때가 있습니다.

function A() {}

 

function B() {} 

 

function C() {}

 

function D() {}

기타 플러그인 삽입 스크립트 + 라이브러리 스크립트 + setTimeout 설정이들어간 스크립트 + 자기가 원하는 

스크립트변수들의 초기화 및 사이트에서 사용하는 변수 + 전송받은 파라미터 재설정 등등.....

 

같이  수많은 작업들이 들어간 스크립트 처리가 필요할때 반드시 스크립트들간의 실행 순서를 바로 알고 사용해야만 

동적으로 생성되는 함수및, 플러그인 프로토타입함수를 호출할때 오류및 에러가 발생하지 않습니다.

- 보통 -

플러그인 + 프로토타입으로 생성된 라이브러리들은

 

동적으로 함수(메써드)를 생성하고 확장하기 때문에

 

실행 순서를 지켜야만 합니다.

 

플러그인+라이브러리 함수에 파라미터를 전달할때 ...

 

반드시 호출 순서 (실행 순서) 알아야 합니다.

 

스크립트 내에서 아래처럼 실행하는구문 

즉 아래와같은 실행을 제외하고는 나머지는 다 실행 순서가 있다. 

 

<script type="text/javaScript" language="javascript"> 

 alert('무조건 가장 먼저 실행된다. 다필요없다 무조건 첫번째... ');

 alert 다음에 실행된다.

 execFunction();

 

// 자바스크립트는 동기방식이므로 하나가 실행되고나야 다음이 진행된다.

 

위표현방식을 제외한 스크립트 코드의 실행순서.

1. 스크립트내에 어떤 위치에 있든지 무조건 가장먼저 실행됨

스크립트내에서 어디에, 어느위치에,  어느라인에 삽입했든지 무조건 반드시 가장 먼저 실행된다.

맨앞에 ;  표시 반드시 있어야함.

;(function($) { 실행로직 삽입... })(jQuery);

 

2.

$(document).ready(function() {});  

구문과

 $(function() { } ); 

구문은 스크립트내에서 서로간의 위치에 따라서

위의 두 구문끼리만 스크립트 내에서 어디에있는지 서로간의 

삽입 위치에 따라서 두구문들이 다실행되야 다음 3번째 구문형태 코드가 실행된다.

즉 두가지 유형의 코드들이 무조건 2번째로 실행된다.

실행 순서에 영향을 받음..

즉 어떤 구문이 먼저 나왔느냐에 따라서 먼저 실행됨.

먼저나온 구문이 무조건 먼저 실행됨...

한마디로 먼저실행하고 싶은 구문을 먼저 삽입해야함.

 

 

3. 무조건 세번째로 시작된다.

즉 2번째 실행코드들이 많으면 많을수록 2번째 유형의 코드들이 다실행되고 나야

윈도우.온로드가 실행된다.

window.onload = function() { 실행구문..... }

당연히 실행 샘플코드 첨부했습니다.

아래와같은 실행 순서로 실행된다구요 ^^.

스크립트를 실행해보세요~ ~ 그럼 한번에 이해하실 수 있습니다.

 

 

실제 사용 샘플 코드

<script type="text/javaScript" language="javascript">

// 시작 : 다필요없고 무조건 먼저 실행됩니다. ^^.

alert('무조건 가장 먼저 실행된다. 다필요없다 무조건 첫번째... ');

alert 다음에 실행된다....

execFunction();

// 끝 : 다필요없고 무조건 먼저 실행됩니다. ^^.

 

// 1: 가장 먼저 실행됨...

;(function($) {

alert('call  ;(function($) {   11111111111111111111111  ');

})(jQuery);

 

// 6 : 6 번째 실행됨..

$(document).ready(function() {

try {

alert('call  $(document).ready(function() {  66666666666666666 ');

} catch(e) { 

alert('AAAAA Error ....'+e.toString()); 

}

});

 

// 3 : 3 번째 실행됨..

$(function() { 

alert('call  $(function() {    333333333333333  ');

} );

 

// 4 : 4 번째 실행됨...

$(document).ready(function() { 

alert('call  $(document).ready(function() {     444444444444444444444   ');

} );

// 5 : 5 번째 실행됨..

$(function() { 

alert('call  $(function() {    555555555555555555555  ');

} );

 

// 2 : 2 번째 실행됨..

;(function($) {

alert('call  ;(function($) {   2222222222222222222222222   ');

})(jQuery);

// 7 : 7 번째 실행됨..

window.onload = function() {

alert('call  window.onload = function() {  777777777777777777777777 ');

}

 

// 2 : 2 번째 실행됨..

;(function($) {

alert('call  ;(function($) {   SUB   2222222222222222222222222   ');

})(jQuery);

// 5 : 5 번째 실행됨..

$(function() { 

alert('call  $(function() {   SUB 555555555555555555555  ');

} );

</script>

 

출처 : 겸손해진JQUERY