jQuery Deferred notifyWith() Method

Beginner
6 min read
Updated: Oct 2026
4 examples
Live preview
jQuery deferred.notifyWith() — progress updates with custom this context
Definition

What Is notifyWith()?

deferred.notifyWith(context [, args]) fires progress callbacks while pending (since jQuery 1.7), with this set to context and values taken from an optional args array.

Remember
dfd.progress(function (pct) {
  // this === context
});

dfd.notifyWith(context, [40])

notify(40)              // default this
notifyWith(ctx, [40])   // this === ctx; args as array
NeedUse
Progress + custom thisdfd.notifyWith(ctx, [value])
Simple progressdfd.notify(value)
Listendfd.progress(fn)
Approach

How to Use notifyWith()

Pick a context object, pass progress values in an array, then settle when done.

  1. Create a Deferred and register .progress(fn).
  2. Choose the object that should be this inside the handler.
  3. Call notifyWith(context, [arg1, arg2, ...]) while pending.
  4. Finish with resolve / resolveWith (or reject variants).
PieceRequired?Role
contextYesBecomes this in progress callbacks
argsOptionalArray (or array-like) of callback arguments
Return value—Same Deferred (chainable)

Pseudocode

Pseudocode
function notifyWith(deferred, context, args):
    if deferred is resolved or rejected:
        return deferred
    list = args or []
    for each progressCallback (in order):
        call progressCallback with this=context, params=list...
    return deferred
Reference

Cheat Sheet

Keep these facts handy when binding progress to a context.

TopicDetail
Syntaxdeferred.notifyWith( context [, args ] )
SincejQuery 1.7
argsArray / array-like (spread to callback)
vs notifySets this; args wrapped in an array
State change?No — stays pending
After settleIgnored
FamilyLike resolveWith / rejectWith
Try it

Live Preview

Pick a scenario and see notifyWith() set this and pass args.

Browser demo of deferred.notifyWith() — same ideas as the examples below.

Result
panel: Upload
progress: 40%
Code

jQuery Examples

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

Example 1 — Context and Percent

Pass a panel object as this and the percent in an array.

jQuery
var panel = { name: "Upload" };
var dfd = $.Deferred();

dfd.progress(function (pct) {
  console.log("panel: " + this.name);
  console.log("progress: " + pct + "%");
});

dfd.notifyWith(panel, [40]);
// panel: Upload
// progress: 40%
Try It Yourself

How It Works

  1. Context. panel becomes this inside the progress handler.
  2. Args array. [40] spreads to the first parameter pct.
  3. Read properties via this.name without closing over panel.
  4. Still pending until you resolve or reject.

Example 2 — notify vs notifyWith

Plain notify does not set your object as this.

jQuery
var panel = { title: "Upload panel" };
var dfd = $.Deferred();
var lines = [];

dfd.progress(function () {
  lines.push("this.title: " + this.title);
});

dfd.notify(10);
dfd.notifyWith(panel, [20]);

console.log(lines.join("\\n"));
// this.title: undefined
// this.title: Upload panel
Try It Yourself

How It Works

  1. notify(10) — default this; this.title is undefined.
  2. notifyWith(panel, [20]) — this is panel.
  3. Same listener shows the difference clearly.
  4. Rule: need a custom this? Use notifyWith.

Example 3 — Multiple Arguments from an Array

Array elements become separate callback parameters.

jQuery
var ui = { id: "job-1" };
var dfd = $.Deferred();

dfd.progress(function (step, total, label) {
  console.log(this.id + ": " + step + "/" + total + " " + label);
});

dfd.notifyWith(ui, [2, 4, "sync"]);
// job-1: 2/4 sync
Try It Yourself

How It Works

  1. Array [2, 4, "sync"] maps to step, total, label.
  2. Context ui supplies this.id.
  3. One call carries structured progress data.
  4. Same idea as resolveWith(ctx, [a, b]).

Example 4 — After Settle Is Ignored

Once resolved, further notifyWith() calls do nothing.

jQuery
var dfd = $.Deferred();
var lines = [];

dfd.progress(function (pct) {
  lines.push("progress: " + pct);
});

dfd.resolve("ok");
dfd.notifyWith({}, [99]);

console.log(lines.length ? lines.join("\\n") : "no progress after resolve");
// no progress after resolve
Try It Yourself

How It Works

  1. Resolve first — Deferred leaves pending.
  2. notifyWith after — ignored (no throw).
  3. Handler never runs for that late update.
  4. Rule: send all progress before settle.

Edge Cases & Pitfalls

Watch these when choosing notifyWith over notify.

args

Second argument is an array

Write notifyWith(ctx, [a, b]), not notifyWith(ctx, a, b). Loose extra args are not the jQuery pattern.

this

Arrow functions ignore context

Arrow progress handlers do not get a new this. Use a normal function if you rely on notifyWith context.

settle

Does not finish the Deferred

Always resolve/reject (or *With) when work ends. Progress alone leaves listeners pending.

access

Keep notifyWith private

Only the Deferred creator should call it. Give consumers promise() to listen safely.

Compatibility

Browser Support

deferred.notifyWith() has shipped since jQuery 1.7 and works in all modern browsers with jQuery loaded. It pairs with progress() like notify(), with an added context.

✓ jQuery 1.7+

deferred.notifyWith()

Supported everywhere jQuery Deferred runs in the browser. Use it when progress handlers need a custom this.

100% Browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
notifyWith() Excellent

Bottom line: Call dfd.notifyWith(ctx, [args]) while pending. Listen with progress(). After settle, calls are ignored.

Analysis

Performance Notes

ApproachCostBest for
notifyWithO(k) handlersProgress with bound this
notifyO(k)Simple values, no context
Frequent DOM updatesUI costThrottle milestones

Context binding is cheap. Throttle progress UI the same way you would with notify().

Remember

Key Takeaways

  • Role: progress updates with a chosen this.
  • Args: pass an array — elements become parameters.
  • vs notify: use notifyWith when context matters.
  • Finish: still resolve/reject; late notifies are ignored.

One line: dfd.notifyWith(ctx, [args]) is progress with a custom this — same settle rules as notify().

Frequently Asked Questions

notifyWith(context, args) calls progress callbacks while the Deferred is pending. Inside each callback, this is set to context, and values from the args array are passed as separate parameters.
notify(a, b) passes arguments directly with default this. notifyWith(ctx, [a, b]) sets this to ctx and requires args as an array (or array-like) — same pattern as resolveWith and rejectWith.
Pass an array such as [40] or [step, total, label]. jQuery spreads those elements as individual arguments to each progress callback.
No. Like notify(), it only fires progress handlers. Call resolve(), resolveWith(), reject(), or rejectWith() when the work finishes.
Use it when progress handlers need a specific this — for example a UI widget or view model — especially inside timers where this would otherwise be lost.
Yes. After the Deferred is resolved or rejected, further notifyWith() calls are ignored, and late progress handlers do not receive past progress.

Next: pipe()

Learn the legacy filter/chain API and its modern then() replacement.

pipe() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

9 people found this page helpful

jQuery deferred.notify() Method jQuery deferred.pipe() Method