jQuery Deferred done() Method

What You’ll Learn

The done() method registers a success callback on a jQuery Deferred. It runs when the operation resolves — with data from resolve(), an AJAX response, or a completed animation. This tutorial covers syntax, five examples, comparisons with fail() and then(), and best practices.

Introduction

Async tasks usually end in one of two ways: success or failure. jQuery’s done() method is dedicated to the success path. When a Deferred resolves — because an AJAX call returned data, a timer finished, or you called resolve() manually — every registered done() callback runs with the result.

Keep outcome-specific work in done(): render UI, parse JSON, trigger follow-up requests. Pair it with fail() or catch() for errors and always() for shared cleanup.

Understanding the done() Method

done() is part of jQuery’s Deferred Object API (since jQuery 1.5). Calling deferred.done(callback) adds your function to a success queue. When the Deferred enters the resolved state, jQuery invokes each callback in order, passing the values from resolve().

done() does not run on rejection. If the Deferred fails, only fail(), catch(), and always() handlers execute (plus then() rejection branches).

📝 Syntax

General form of deferred.done:

deferred.done( doneCallback [, doneCallback ] )

Parameters

• doneCallback — function executed when the Deferred resolves. Receives resolve arguments (often one data object, or multiple values from resolve(a, b, c)).

Return value

• Returns the same Deferred object for chaining fail(), always(), or another done().

AJAX example

$.ajax({
  url: "/api/profile",
  method: "GET"
}).done(function (response) {
  console.log("Request successful:", response);
});

Examples Gallery

Each example demonstrates success handling with jQuery Deferred. Use DevTools or the Try-it links to run them.

const dfd = $.Deferred();

dfd.done(function (value) {
  console.log("done:", value);
});

dfd.resolve("Request successful");

done: Request successful

function loadProfile() {
  const dfd = $.Deferred();

  setTimeout(function () {
    dfd.resolve({ name: "Alex", role: "Editor" });
  }, 500);

  return dfd.done(function (response) {
    console.log("Request successful");
    console.log(response.name, response.role);
  });
}

Request successful
Alex Editor

const dfd = $.Deferred();

dfd.done(function (data) {
  console.log("Log:", data);
});

dfd.done(function (data) {
  $("#status").text("Loaded " + data);
});

dfd.done(function (data) {
  trackEvent("load", data);
});

dfd.resolve("order-42");

Log: order-42
(update UI)
(analytics ping)

const dfd = $.Deferred();

dfd.done(function (status, body, contentType) {
  console.log(status, body, contentType);
});

dfd.resolve(200, "{ ok: true }", "application/json");

200 { ok: true } application/json

const dfd = $.Deferred();

dfd.resolve("already settled");

dfd.done(function (value) {
  console.log("done (registered late):", value);
});

done (registered late): already settled

🚀 Use Cases

• AJAX requests — update the DOM or store server data when the response succeeds.
• Animation effects — run follow-up code when .fadeOut() or custom Deferred-based animations complete.
• Promise chains — combine with then() to transform success values step by step.
• Timeouts — execute success logic when an operation finishes within an expected window.
• Modular listeners — let different parts of the app attach their own done() handlers to the same Deferred.

📝 Notes

• done() never runs when the Deferred is rejected — use fail() instead.
• Returning a value from done() does not change the chain; use then() to transform and pass values forward.
• Prefer validating data inside done() before rendering untrusted server responses.
• On jQuery 3+, then(onFulfilled) is often used in new code; done() remains widely used in legacy jQuery AJAX.
• Always add error handling — success-only chains leave users stuck when requests fail.

💡 Best Practices