Firing gọi lại sau nhiều lần yêu cầu ajax được hoàn thành

Question

loadInfo: function(){ 
    var jsonCounter = 0, 
    room = ['room1','room2','room3'], 
    dates = [], 
    prices = [] 

    $.each(booking.rooms, function(key, room_name) { 
     $.getJSON('/get_info.php?room='+room_name, function(data) { 
      dates[room_name] = data 
      jsonCounter++ 
     }) 
     $.getJSON('/get_info.php?room='+room_name+'&prices', function(data) { 
      prices[room_name] = data 
      jsonCounter++ 
     }) 

    }) 

    function checkIfReady() { 
     if (jsonCounter === rooms.length * 2) { 
      clearInterval(timer) 
      run_the_rest_of_the_app() 
     } 
    } 

    var timer = setInterval(checkIfReady, 100) 

} 

(Modified rất nhiều, vì nó là một phần của một lớp học vv vv)

Tại thời điểm này cảm thấy một chút hackish, như việc sử dụng bộ đếm thời gian dường như rác. Tôi sẽ sử dụng $ .when và $ .done, nhưng tôi không biết có bao nhiêu phòng có thể, vì vậy tôi không biết phải đưa vào thời điểm nào.

Làm cách nào để đảm bảo rằng run_the_rest_of_the_app() chỉ được gọi khi tất cả yêu cầu AJAX trở lại?

Answer 1

• var activeAJAX = 0;

• Trước khi thực hiện một cuộc gọi AJAX, activeAJAX++;

• Sau khi hoàn thành một cuộc gọi AJAX (trong callback): if (--activeAJAX == 0) { allDone(); }

Answer 2

Dưới đây là làm thế nào để sử dụng khi/done

loadInfo: function(){ 
    var room = ['room1','room2','room3'], 
    dates = [], 
    prices = [], 
    requests = []; 

    $.each(booking.rooms, function(key, room_name) { 
     var aRequest; 

     aRequest = $.getJSON('/get_info.php?room='+room_name, function(data) { 
      dates[room_name] = data; 
     }); 
     requests.push(aRequest); 

     aRequest = $.getJSON('/get_info.php?room='+room_name+'&prices', function(data) { 
      prices[room_name] = data; 
     }); 
     requests.push(aRequest); 

    }) 

    $.when.apply($, requests).done(run_the_rest_of_the_app); 
}