What Is the jQuery .ajaxStop() Method?

The jQuery .ajaxStop() method is a global event handler used to detect when all active AJAX requests have completely finished. This article explains the primary purpose of .ajaxStop(), how it works within the jQuery AJAX lifecycle, common use cases such as toggling loading spinners, and how it differs from other completion handlers.

Purpose of the .ajaxStop() Method

When a web page executes multiple asynchronous requests simultaneously, tracking when all network operations have resolved can be complex. The .ajaxStop() method solves this by monitoring the active request queue. It triggers a callback function specifically at the moment when the last pending AJAX request finishes, meaning there are no more active requests running.

Basic Syntax and Implementation

As of jQuery 1.8, the .ajaxStop() method should only be attached to the document object.

$(document).ajaxStop(function() {
    // Code executed when all AJAX requests finish
});

Whenever an AJAX request begins, jQuery checks if an internal request counter is at zero; if it is, .ajaxStart() runs. Each concurrent request increments this counter, and each completed request decrements it. When the counter reaches zero again, jQuery executes the handler registered with .ajaxStop().

Common Use Cases

  • Hiding Global Loading Spinners: The most frequent use case for .ajaxStop() is hiding global UI activity indicators. Pairing it with .ajaxStart() provides seamless visual feedback without needing to track individual API calls:
$(document).ajaxStart(function() {
    $("#loading-spinner").show();
});

$(document).ajaxStop(function() {
    $("#loading-spinner").hide();
});
  • Re-enabling UI Elements: Form inputs or submission buttons disabled during data synchronization can be re-enabled universally once all pending operations conclude.
  • Batch Completion Actions: Triggering final DOM updates or analytical tracking events that depend on a sequence of parallel data calls being entirely finished.

Differences Between .ajaxStop() and .ajaxComplete()

While both methods handle AJAX finalization, they serve distinct purposes:

  • .ajaxComplete() triggers every time any single AJAX request finishes, regardless of whether other requests are still pending. It also receives the event, XMLHttpRequest, and options objects for that specific call.
  • .ajaxStop() triggers only once all current requests are resolved. It does not accept parameters specific to individual requests, as it represents a collective state rather than an individual request event.

Key Considerations

To ensure .ajaxStop() functions as intended, ensure the requests are configured properly:

  1. Global Events Setting: The method only registers requests where the global setting is set to true (which is the default in jQuery AJAX settings). If a request includes global: false, it bypasses .ajaxStop().
  2. Success and Error Independence: .ajaxStop() executes regardless of whether the requests succeeded or failed, as long as all network activity has resolved.