jQuery가 연기 된 여러 함수가 완료된시기를 알려주는 방법

Question

AJAX에서 가져온 데이터를 처리하는 3 가지 함수가 있으며, AJAX 함수가 호출 된 후 페이지를 업데이트합니다.

AJAX 함수를 호출 할 때 로더를 표시하면 AJAX가 완료되고 함수가 완료된 후 로더를 숨기려고합니다.

어떻게 3 가지 기능이 모두 완료되면 jQuery에서 whenfer를 사용하여 테스트를 지연시킬 수 있습니까?

여기 내 AJAX 코드입니다. 이것은 AJAX 성공에 대한 로더를 숨 깁니다. 이상적으로 이것은 3 개의 함수가 완료되었거나 성공한 것입니다.

3 개의 함수는 처리하고 페이지에 표시 할 데이터를 받지만 AJAX 함수는 아닙니다.

function setUpStocking() { 
    $.ajax({ 
     url: url, 
     cache: false, 
     beforeSend: function(){ 
      // Show loader 
      $('.loader').show(); 
     }, 
     success: function(data){ 

      updateMyList(data.gifts); 
      updateRecievedGift(data.recieved); 
      updateGiftsOpenedToday(data.opened); 

      // Hide loader 
      $('.loader').hide(); 

     } 
    }); 
} 

기능은 AJAX 기능 밖에 :

function updateMyList(gifts) { 
    // Get data, process it and add it to page 
} 

function updateRecievedGift(recieved) { 
    // Get data, process it and add it to page 
} 

function updateGiftsOpenedToday(opened) { 
    // Get data, process it and add it to page 
} 

Answer 1

이 먼저 당신이 AJAX 요청을 할 때 이러한 기능의 각 jQuery를 상대방에게 제공하는 이연 개체를 반환 할 필요가있다. 그런 다음 그 배열을 배열에 넣고이를 $.when()에 적용 할 수 있습니다. 다음과 같이 입력하십시오 :

var deferreds = []; 
$.ajax({ 
    url: url, 
    cache: false, 
    beforeSend: function(){ 
     // Show loader 
     $('.loader').show(); 
    }, 
    success: function(data){ 
     deferreds.push(updateMyList(data.gifts)); 
     deferreds.push(updateRecievedGift(data.recieved)); 
     deferreds.push(updateGiftsOpenedToday(data.opened)); 

     $.when.apply(deferreds).done(function() { 
      // Hide loader 
      $('.loader').hide(); 
     });  
    } 
});