아약스 콜백 체인

Question

에 내 사이트에 탐색 모음에 봉착하고, 일부 체인에 건설되고있어 :

// in Init method 
nav 
    .hideContainer() 
    .fetchData() 
    .buildHTML() 
    .eventify() 
    .showContainer(); 

그것은 확인을, 그리고 나를 위해 잘 작동합니다. 그러나 fetchData 메서드에서 로컬 데이터를 사용하여로드합니다 (인라인 json). 하지만 이제는 원격 데이터를 가져와야합니다 (아약스 호출에서). Init 방법을 변경하지 않고도 변경할 수 있습니까?

가 나는 동기 아약스 호출이 일을 시도했다 :

// in fetchData() method 
var data; 
$.ajax ({ 
    async: false, 
    url : '/some/url/', 
    success : function(res) { 
     data = res; 
    } 
}); 
return data; 

을하지만 그것이 느린 것을 알고있다 -가로드되는 동안 브라우저를 차단합니다.

나는이 같은 방법으로 같은 내 Init 방법을 수정할 수 있음을 알고 :

nav 
    .hideContainer() 
    .fetchData(function(){ 
     nav.buildHTML().eventify().showContainer() 

}); 

하지만, 내가 Init 방법을 수정하지 싶습니다, 나는이 작업을 수행 할 수 있습니까?

P. 나는 Deffered 객체의 방향으로 가야한다고 생각한다. 내가 맞습니까?

Answer 1

당신은 $.ajax 비동기 작업이 동시에 .fetchData()을 기대할 수 없다 귀하의 데이터와 함께 돌아갑니다.

async: false 설정이 좋지 않으며 우아한 체인 연결이 끊긴 경우에도 init()을 변경하는 것이 좋습니다.

이 같은 코드를 변경할 수 있습니다

function fetchData() { 
    // ... 
    return $.ajax ({ 
    url : '/some/url/', 
    success : function(res) { 
    data = res; 
    } 
    }); 
} 

function init() { 
    // ... 
    nav 
    .hideContainer() 
    .fetchData() 
    .done(function() { 
     nav 
     .buildHTML() 
     .eventify() 
     .showContainer(); }); 

당신은 deferred object이 ajax()에 의해 반환 한 다음에 done() 전화를 반환 할 수 있기 때문에, fetchData() 함수에 콜백을 도입 할 필요가 없습니다 - documentation를 참조하십시오.

오류를 처리하려면 fail() 및 then()도 참조하십시오.

Answer 2

당신이 같은

어떻게 좀 데이터가 오면 방법이

$.ajax ({ 
    url : '/some/url/', 
    success : buildHTML 
}); 

그런 다음,이 buildHTML를 호출 가져 오기()