Creating and Resolving Deferred
In this page:
Create a Deferred
$.Deferred() constructs a new Deferred object representing a task that hasn't resolved or rejected yet. You typically create one at the start of a function that wraps some asynchronous work, like a timer or a manual request, so you can control exactly when it settles.
Example: Create a Deferred
<!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("Created, state:", dfd.state());
</script>
</body>
</html>Resolve a Deferred
Call resolve() when the asynchronous operation completes successfully, and any done() callbacks already attached — or attached later — will receive whatever values you pass to resolve(). This is the signal that tells all the listening code the task finished the way it was supposed to.
Example: Resolve a Deferred
<!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("Success value");
</script>
</body>
</html>Reject a Deferred
Call reject() when the asynchronous operation fails, and any fail() callbacks receive the values passed to reject(), typically an error message or object describing what went wrong. This lets calling code distinguish a genuine failure from a successful result without needing separate return paths.
Example: Reject a Deferred
<!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(error) { console.log(error); });
dfd.reject("Something went wrong");
</script>
</body>
</html>Resolve After a Delay
A Deferred can represent any delayed operation, not just an AJAX call — a setTimeout, a user interaction, or a long-running calculation can all be wrapped in one and resolved once the actual work finishes. This makes Deferred a general-purpose tool for turning any async pattern into something with a consistent done/fail interface.
Example: Resolve After a Delay
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
function delayedTask() {
const dfd = $.Deferred();
setTimeout(function() { dfd.resolve("Finished"); }, 200);
return dfd;
}
delayedTask().done(function(msg) { console.log(msg); });
</script>
</body>
</html>Return a Promise
Return d.promise() — not the Deferred itself — when outside code should be able to observe the task's outcome but shouldn't be able to resolve or reject it directly. This protects the internal resolve/reject logic so only the code that created the Deferred controls when it settles.
Example: Return a Promise
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
function loadData() {
const dfd = $.Deferred();
setTimeout(function() { dfd.resolve("data"); }, 100);
return dfd.promise();
}
const result = loadData();
result.done(function(data) { console.log(data); });
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: