Trigger a JavaScript method once all AJAX call completes

One of my brother asked me a fantastic question, How to trigger a JavaScript method when all AJAX calls are completed. All Ajax calls are asynchronous. How can we do that?

The solution is very simple. Ajax has a built-in methods like .ajaxStart() and .ajaxStop().

.ajaxStart() is triggered before any actual AJAX calls were made.

.ajaxStop() is triggered when all of the AJAX calls were completed.

I have a sample code, which has a ActionMethod that takes up the ID of the ajax call, and it waits for random amount of time to complete the action. In the View, five ajax calls were made with different IDs and check whether .ajaxStart() and .ajaxStop() works

C#:


JavaScript:

 

Result:

Share your thoughts