Deferred States
In this page:
Pending State
Every new Deferred starts out in the pending state, meaning its underlying task hasn't finished in either direction yet. Pending is always the starting point — a Deferred can only move forward from here to one of two possible outcomes.
Example: Pending State
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
console.log(dfd.state());
</script>
</body>
</html>Resolved State
When resolve() is called on a Deferred, it moves to the resolved state, and any done() callbacks attached to it are called immediately with the values passed to resolve(). This is how a Deferred announces that its task completed successfully.
Example: Resolved State
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
dfd.done(function(value) { console.log(value); });
dfd.resolve("done!");
</script>
</body>
</html>Rejected State
When reject() is called on a Deferred, it moves to the rejected state, and any fail() callbacks attached to it are called with the values passed to reject(). This is the Deferred's way of announcing that the underlying task failed.
Example: Rejected State
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
dfd.fail(function(reason) { console.log(reason); });
dfd.reject("something failed");
</script>
</body>
</html>State Cannot Go Back
Once a Deferred is resolved or rejected, its state cannot go back to pending or switch to the other outcome — the final state is permanent. This one-way transition is what makes a Deferred reliable to depend on: once you know it settled, you know that outcome won't change.
Example: State Cannot Go Back
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
dfd.resolve();
console.log(dfd.state());
dfd.reject();
// has no effect, already resolved
</script>
</body>
</html>Check State in a Task
The state() method returns the current state as a string (pending, resolved, or rejected), which is useful when you need to check where an asynchronous task currently stands without attaching a new callback to find out.
Example: Check State in a Task
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
if (dfd.state() === "pending") {
console.log("Still working");
}
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: