One of the latest chapters of the mentioned book comes up with the answer: store responses in an ordered array and execute the callback when every response has been received (there are no pending operations).
Let’s see an specific example: retrieve a set of user profiles from a third party database and print the result in an HTML table only when all of them have been received.
In the following five steps we’ll figure out how to resolve this:
1.- Create the HTML skeleton to print the user profiles
2.- Create a simple function to retrieve user profiles
For the sake of simplicity, I’ve mocked the profile database using an in-memory dictionary:
3.- Create a function to retrieve a set of users profile and execute a callback upon every profile retrieval
In this step we’re building the function that will start in parallel the required operations and execute the relevant callback (success or error in case of any failure):
4.- Create the client to retrieve a list of user profiles
Step 4 creates the client that will use the function created in step 3. We need to provide callbacks for both success and error scenearios. Upon success, users profile are printed in the HTML skeleton built in step 1. In case of error, the specific message is shown in the div element:
5.- Run it
In this case we’re updating the DOM just once, upon retrieving the three users profile. This doesn’t provide a high advantage, but if we’re retrieving hundreds of elements, updating the DOM in any response may reduce significantly our application performance .