jQuery.when() 메서드의 활용 예제와 설명

jQuery.when() 메서드는 여러 개의 Deferred 객체가 완료될 때까지 기다린 다음에 콜백 함수를 실행하는 데 사용됩니다. 이를 통해 비동기 작업의 완료를 조율하고 관리할 수 있습니다. 아래 예제들을 통해 jQuery.when()의 활용 방법을 살펴보겠습니다.

예제 1: 여러 개의 비동기 작업을 동시에 처리

// 비동기 작업 1
var deferred1 = $.ajax({
    url: "https://api.example.com/data1",
    method: "GET"
});

// 비동기 작업 2
var deferred2 = $.ajax({
    url: "https://api.example.com/data2",
    method: "GET"
});

// jQuery.when()을 사용하여 두 작업이 모두 완료될 때까지 기다림
$.when(deferred1, deferred2).done(function(result1, result2) {
    // 두 작업이 완료되면 실행될 콜백 함수
    console.log("데이터 로드 완료:", result1, result2);
});

결과: 두 개의 비동기 작업이 모두 완료된 후에 콘솔에 "데이터 로드 완료"와 결과가 출력됩니다.

예제 2: 비동기 작업과 일반 작업 조합

// 비동기 작업
var deferred = $.ajax({
    url: "https://api.example.com/data",
    method: "GET"
});

// 일반 작업
var regularTask = function() {
    console.log("일반 작업이 실행되었습니다.");
};

// jQuery.when()을 사용하여 비동기 작업이 완료될 때까지 기다림
$.when(deferred).done(function(result) {
    // 비동기 작업 완료 후 실행될 콜백 함수
    console.log("데이터 로드 완료:", result);
    // 일반 작업 실행
    regularTask();
});

결과: 비동기 작업이 완료된 후에 "데이터 로드 완료"와 결과가 출력되고, 그 후에 "일반 작업이 실행되었습니다."가 출력됩니다.

예제 3: Deferred 객체의 실패 처리

// 비동기 작업
var deferred = $.ajax({
    url: "https://api.example.com/nonexistent",
    method: "GET"
});

// jQuery.when()을 사용하여 비동기 작업이 완료될 때까지 기다림
$.when(deferred).done(function(result) {
    console.log("데이터 로드 완료:", result);
}).fail(function(xhr, status, error) {
    // 비동기 작업 실패 시 실행될 콜백 함수
    console.error("데이터 로드 실패:", status, error);
});

비동기 작업이 실패하면 콘솔에 "데이터 로드 실패"와 실패 정보가 출력됩니다.