jQuery ajaxStop Event

What Is ajaxStop?

ajaxStop is a global AjaxEvent (since jQuery 1.0; .on() binding since 1.7). jQuery triggers it on document when the last qualifying Ajax request finishes and no others remain active. All registered handlers run.

$(document).on("ajaxStop", function () {
  // runs when no global Ajax requests remain active
});

// Batch lifecycle:
// ajaxStart (first begins)  →  …requests…  →  ajaxStop (last ends)

// Opt out for one call:
$.ajax({ url: "/x", global: false });

How to Use ajaxStop

Bind once on document, then hide UI when global Ajax activity ends.

1. Attach the handler to document with .on("ajaxStop", handler).
2. Pair with ajaxStart if you show a spinner when activity begins.
3. Make requests with $.ajax(), $.get(), $.post(), or .load().
4. Remember: the handler has no jqXHR / settings args.
5. Use global: false on requests that must stay silent.

Pseudocode

bind ajaxStop on document with handler()

when a jQuery Ajax request finishes:
    if request.global === false:
        do not count it / do not fire ajaxStop for it
        return

    decrement active global request count

    fire ajaxComplete for this request

    if active global request count === 0:
        fire ajaxStop
            for each registered handler:
                call handler()

Cheat Sheet

Keep these facts handy while wiring global loading UI.

Live Preview

Run real requests and watch ajaxStart / ajaxStop update the status once per batch.

Ready — pick an action and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

$(document).on("ajaxStop", function () {
  $(".log").text("Triggered ajaxStop handler.");
});

$(".trigger").on("click", function () {
  $(".result").load("ajax/test.html");
});

Click .trigger → .load() runs
When request finishes (and none remain) → .log shows
"Triggered ajaxStop handler."

$(document).on("ajaxStop", function () {
  $("#loading").hide();
});

Last Ajax request completes → #loading hides
Pair with ajaxStart to show when activity begins

var stopCount = 0;

$(document).on("ajaxStop", function () {
  stopCount++;
  $("#stop-count").text(stopCount);
});

$("#run-two").on("click", function () {
  $.get("/api/a");
  $.get("/api/b");
});

// After both finish: stopCount === 1 (not 2)

Click #run-two → two parallel $.get()
stopCount increments by 1 (not 2)
ajaxComplete would fire twice

$(document).on("ajaxStop", function () {
  $("#log").append(" ajaxStop");
});

// Fires ajaxStop (when idle)
$.get("/api/public");

// Does NOT fire ajaxStop
$.ajax({ url: "/api/silent", global: false });

Public $.get → ajaxStop runs when idle
Private $.ajax({ global: false }) → silent
(does not delay your loading spinner)

$(document).on("ajaxStart", function () {
  $("#loading").show();
});

$(document).on("ajaxStop", function () {
  $("#loading").hide();
});

$("#run-two").on("click", function () {
  $.get("/api/a");
  $.get("/api/b");
});

Click #run-two → #loading shows (ajaxStart once)
Both finish → #loading hides (ajaxStop once)
Spinner stays visible for the whole batch

Performance Notes

Global handlers are fine when they stay light. Toggle visibility only, and prefer ajaxComplete or .always() for per-request work.

Key Takeaways