Introduction to Deferred Objects
In this page:
What is a Deferred Object?
A Deferred object wraps an asynchronous task and exposes methods to announce when that task eventually succeeds or fails. It's jQuery's own implementation of the promise pattern, built before native Promises existed in JavaScript, and it still underlies every jQuery AJAX call today.
Example: What is a Deferred Object?
<!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>Why Use Deferred?
Deferred objects help separate an asynchronous task from the code that eventually uses its result, so the code that starts the task doesn't need to know who's listening for it to finish. This separation makes callback-heavy code much easier to organize and reason about, especially once multiple things depend on the same result.
Example: Why Use Deferred?
<!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 ready"); }, 100);
return dfd.promise();
}
loadData().done(function(result) { console.log(result); });
</script>
</body>
</html>Deferred and Callbacks
done() registers a callback for successful completion, fail() registers one for rejection, and always() registers a callback that runs no matter which outcome happens — similar to a try/catch/finally block but for asynchronous code. You can attach multiple callbacks of each type, and jQuery calls all of them in the order they were added.
Example: Deferred and Callbacks
<!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() { console.log("Success"); });
dfd.fail(function() { console.log("Failed"); });
dfd.always(function() { console.log("Always runs"); });
dfd.resolve();
</script>
</body>
</html>Deferred Promise
A promise exposes the done, fail, and always methods of a Deferred without exposing resolve or reject, so code that only observes the result can't accidentally control it. This is the standard object to return from a function, so callers can react to the outcome without being able to interfere with it.
Example: Deferred Promise
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const dfd = $.Deferred();
const promise = dfd.promise();
promise.done(function() { console.log("Observed"); });
dfd.resolve();
</script>
</body>
</html>Small Deferred Project
Deferred objects are a good way to see asynchronous flow explicitly: the task is started immediately, but its outcome is only reported later once it actually completes, whether that's a timer, an animation, or a network request finishing.
Example: Small Deferred Project
<!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("Task started");
setTimeout(function() {
dfd.resolve("Task complete");
}, 200);
dfd.done(function(msg) { console.log(msg); });
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: