모든 jQuery Ajax 요청이 완료될 때까지 대기하도록 하는 방법

질문 : 모든 jQuery Ajax 요청이 완료 될 때까지 기다리시겠습니까?

---

모든 jQuery Ajax 요청이 다른 함수 내에서 완료 될 때까지 함수가 대기하도록하려면 어떻게해야합니까?

요컨대, 다음을 실행하기 전에 모든 Ajax 요청이 완료 될 때까지 기다려야합니다. 하지만 어떻게?

답변

---

jQuery는 이제 이러한 목적을 위해 when 함수를 정의합니다.

임의의 수의 Deferred 개체를 인수로 받아들이고 모든 개체가 해결되면 함수를 실행합니다.

즉, (예를 들어) 네 개의 ajax 요청을 시작한 다음 완료되면 작업을 수행하려면 다음과 같이 할 수 있습니다.

$.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four ajax requests resolve.
    // a1, a2, a3 and a4 are lists of length 3 containing the response text,
    // status, and jqXHR object for each of the four ajax calls respectively.
});

function ajax1() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

제 생각에는 깨끗하고 명확한 구문을 만들고 페이지가 개발됨에 따라 원치 않는 부작용을 일으킬 수있는 ajaxStart 및 ajaxStop과 같은 전역 변수를 사용하지 않습니다.

기다려야하는 아약스 인수의 수를 미리 알지 못하는 경우 (즉, 가변 개수의 인수를 사용하려는 경우) 여전히 수행 할 수 있지만 약간 까다 롭습니다. $ .when ()에 Deferreds 배열 전달을 참조하십시오 (및 가변 인수 수로 문제를 해결할 때 jQuery .).

ajax 스크립트 등의 실패 모드에 대한 더 깊은 제어가 필요한 경우 .when() 의해 반환 된 객체를 저장할 수 있습니다.이 객체는 모든 원래 ajax 쿼리를 포함하는 jQuery Promise 객체입니다. .then() 또는 .fail() 을 호출하여 자세한 성공 / 실패 핸들러를 추가 할 수 있습니다.

출처 : https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done