when() 함수

ajax를 처리하다 보면, 순차적으로 실행이 되어야 할때가 있습니다.

예로 들자면, A,B,C를 각각 호출해야 하는 상황입니다.

B는 A에 의존적이며, C는 B에 의존적이죠.

그럼 A가 완전히 호출된 다음에, B 그리고 C가 순서대로 호출이 되어야 합니다.

그런데 ajax의 비동기 방식으로 실행을 한다면, 호출은 순서대로 되겠지만

처리되는 순서는 다를 수 있습니다.

이런 경우에는 ajax 옵션에 async (기본값 : true, 비동기식) 를 false (동기식)로 해주시면 되지만, 최신 jQuery에서는 지원이 되질 않는 것 같더라구요.

그래서 알아본 것이 바로 when()함수입니다.

jQuery 1.5 이상부터 추가가 되었다고 합니다.

사용법은 다음과 같습니다.

// done 의 경우 성공적으로 호출되었을때 함수를 호출합니다.
$.when( $.ajax( "test.json" ) ).done(function(e) {
    alert("test.json가 호출이 되었습니다");
});

// then의 경우는 ajax가 성공적으로 호출이 되었을때, 실패했을때 각각 다른 함수를 호출합니다.
$.when( $.ajax( "test.jsp" ) ).then(success, fail);

그런데 중요한 점은 when() 함수를 이용해서 동기식 처리를 하는 방법이죠.

var urls= ['test1.json', 'test2.json', 'test3.json'];
var defer = new $.Deferred();
var next = defer;
 
for(var i=0; i<urls.length; i++){ 
    next = next.then(function(){
        return $.ajax(urls[i]).done(function(e){ 
            // 함수 호출 후 실행될 함수
        }); 
    }); 
} 

이렇게 하시면 test1.json -> test2.json -> test3.json 순으로 호출할 수 있습니다.