Firing callback after multiple ajax requests are complete
ajax, callback, jquery
Solution
`var activeAJAX = 0;`
Before making an AJAX call, `activeAJAX++;`
After completing an AJAX call (in the callback): `if (--activeAJAX == 0) { allDone(); }`
Problem
``` 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 a lot, as it's part of a class etc etc.) At the moment this feels a bit hackish, as the timer usage seems rubbish. I would use $.when and $.done, but I don't know how many rooms there might be, so I don't know what to put into when. How do I ensure that run_the_rest_of_the_app() only gets called once all of the AJAX requests come back?