Jquery API core, when

이 글을 검색해서 들어온 사람이라면 기본적으로 when 메소드가 어떤 느낌인지 알 것 이다. 정확한 설명과 예제가 달린 글이 없어서 개인적인 실험 및 공유 차원에서 작성한다.

Jquery 라이브러리 중에 core 에 속한 when 메소드(?) 에 대한 고찰

jQuery.when( deferreds )

사용 가능한 리턴값

Promise Object

This object provides a subset of the methods of the Deferred object (then, done, fail, always, pipe, and state) to prevent users from changing the state of the Deferred.

Deferred 객체를 사용한다네..

이중에 then, done 만 사용해서 예제 작성.

Jquery.when 메소드를 언제, 왜, 어떻게 사용할까?

언제, 왜

A 와 B의 비동기(Ajax) 호출을 할 경우 A, B의 프로세스가 모두 완료 후에 C의 프로세스가 진행되어야 하는 경우에 사용할 수 있다.

when 을 사용하지 않고 처리할 경우 이런 소스가 될 것이다.

간단하게 소스 코드를 설명하자면 a() 메소드를 통해 데이터가 입력되고 b() 메소드를 통해서 데이터가 입력되면 두 데이터 모두 입력되었을 때 c() 메소드를 실행하도록 하는 로직이다. (ajax를 사용한 비동기 프로세스를 구현해야 정확한 설명이 가능한데 테스트 환경 관계상 생략한다.)

위 소스를 when 메소드를 이용해서 작성해보면 이런 소스가 된다.

a(), b()가 모두 실행한 다음 c() 메소드에서 a(), b() 메소드가 던진 return 값을 받아 처리할 수 있다. then과 done을 연속으로 붙이면 당연(?) 하게 두 번 실행된다. 순서를 바꿔 .done().then() 으로 실행할 수도 있다. 즉 순서는 중요하지 않다, then은 실패할 경우에 처리될 메소드를  넘겨주고 done은 단순히 성공했을 때의 메소드만 넘긴다.

※ when메소드에 메소드로 param 값을 줄 경우 괄호"()"를 줘야 리턴 값을 받을 수 있다. 괄호가 없을 경우 메소드 그 자체를 넘기는 (c, c++에 그것과 비슷한) 결과가 된다.

위 방법은 개인적으로 자주 쓰일 수 있는 방법을 정리한 것이고 Jquery에서 when을 설명할 때 쓰인 예제를 보자면,

1 2 3 4 5 6 7 8

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) { // a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively. // Each argument is an array with the following structure: [ data, statusText, jqXHR ] var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It" if ( /Whip It/.test( data ) ) { alert( "We got what we came for!" ); } });

값이 아닌 흔희 말하는 callback 함수를 넘긴 방법인데, 위처럼 2개 이상의 메소드를 던질 경우 당연히 then,done이 받을 return 값도 2개이다. 하지만 위의 경우 처럼 callback함수에 담긴 param값이 2개 이상일 경우 배열 형태로 return 된다. (1개는 생략한다. http://api.jquery.com/jQuery.when/  직접 api를 확인해보자)