jQuery Deferred resolveWith() Method

What You’ll Learn

The resolveWith() method settles a Deferred as successful like resolve(), but lets you set this inside done() callbacks and pass arguments as an array. This tutorial covers syntax, five examples, comparisons with resolve() and rejectWith(), and when custom context matters.

Introduction

Success handlers often need to update a specific UI widget, dashboard view, or data service. Inside a plain done() callback, this may not point where you expect — especially after setTimeout, AJAX callbacks, or nested functions. resolveWith(context, args) solves that by binding this to your chosen object when the Deferred settles as resolved.

It completes the With family: resolveWith() for success, rejectWith() for failure, and notifyWith() for interim progress — all with the same context-and-array pattern.

Understanding the resolveWith() Method

resolveWith() is part of jQuery’s Deferred Object API (since jQuery 1.7). Calling deferred.resolveWith(context, args) locks the Deferred in the resolved state and invokes every done(), then(), and success branch of always() handler with this set to context and parameters taken from the args array.

Unlike resolve(), which passes values directly with default this binding, resolveWith() gives you explicit control over both the callback context and how multiple arguments are delivered.

📝 Syntax

General form of deferred.resolveWith:

deferred.resolveWith( context, args )

Parameters

• context — object used as this when each done() callback runs.
• args — array or array-like object whose values are passed as separate arguments to success handlers (e.g. ["Saved"] or [200, data, meta]).

Return value

• Returns the same Deferred object (already settled as resolved).

Minimal example

const successView = {
  source: "Checkout",
  show: function (message) {
    console.log(this.source + " complete:", message);
  }
};

const dfd = $.Deferred();

dfd.done(function (message) {
  this.show(message);
});

dfd.resolveWith(successView, ["Payment confirmed"]);

Examples Gallery

Each example shows how resolveWith() binds this for success handlers. Use the Try-it links to run them interactively.

const successHandler = {
  source: "Payment API",
  report: function (message) {
    console.log(this.source + " succeeded:", message);
  }
};

const dfd = $.Deferred();

dfd.done(function (message) {
  this.report(message);
});

dfd.resolveWith(successHandler, ["Payment confirmed"]);

Payment API succeeded: Payment confirmed

const dashboardView = {
  panelId: "#stats-panel",
  showSuccess: function (summary) {
    console.log("Panel " + this.panelId + " updated:", summary);
  }
};

const dfd = $.Deferred();

dfd.done(function (summary) {
  this.showSuccess(summary);
});

dfd.resolveWith(dashboardView, ["42 new users today"]);

Panel #stats-panel updated: 42 new users today

const logger = {
  tag: "SYNC",
  log: function (msg) {
    return this.tag + ": " + msg;
  }
};

const dfdPlain = $.Deferred();
dfdPlain.done(function (msg) {
  console.log("plain resolve →", typeof this.tag, msg);
});
dfdPlain.resolve("Data loaded");

const dfdWith = $.Deferred();
dfdWith.done(function (msg) {
  console.log("resolveWith →", this.log(msg));
});
dfdWith.resolveWith(logger, ["Data loaded"]);

plain resolve → undefined Data loaded
resolveWith → SYNC: Data loaded

const apiClient = {
  name: "Users API",
  onSuccess: function (status, data, meta) {
    console.log(this.name + ":", status, data.count, "users", meta.cached ? "(cached)" : "");
  }
};

const dfd = $.Deferred();

dfd.done(function (status, data, meta) {
  this.onSuccess(status, data, meta);
});

dfd.resolveWith(apiClient, [200, { count: 128 }, { cached: true }]);

Users API: 200 128 users (cached)

const uploadService = {
  label: "Photo upload",
  handleSuccess: function (message) {
    console.log(this.label + " finished:", message);
  }
};

const dfd = $.Deferred();

dfd.done(function (message) {
  this.handleSuccess(message);
});

setTimeout(function () {
  dfd.notifyWith(uploadService, [100]);
  dfd.resolveWith(uploadService, ["Upload complete"]);
}, 400);

Photo upload finished: Upload complete

🚀 Use Cases

• Widget success UI — bind done handlers to a widget that renders confirmation messages in the DOM.
• API response handling — pass an HTTP client or logger as this with status codes and payload data.
• Animation completion — resolve with a scene controller as context when transitions finish.
• Deferred chains — resolve at any stage with consistent context for downstream done() handlers.
• Consistent With-methods — use the same context for notifyWith(), resolveWith(), and rejectWith() in one workflow.

📝 Notes

• The args parameter must be array-like — use [result] even for a single argument.
• resolveWith() does not run fail() — only success and always() handlers.
• After resolution, further resolveWith() or rejectWith() calls are ignored.
• Prefer explicit context objects over bare this inside async callbacks.
• Consumers holding only a promise() cannot call resolveWith() — only the Deferred owner settles the outcome.

💡 Best Practices