Managing Multiple Async with when()
In this page:
What is when()?
$.when() takes one or more Deferred objects or promises and returns a single combined promise that only settles once every one of them has settled. It's the tool for waiting on several independent asynchronous operations before continuing, instead of nesting their callbacks inside each other.
Example: What is when()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const a = $.Deferred();
const b = $.Deferred();
$.when(a, b).done(function() { console.log("Both settled"); });
a.resolve();
b.resolve();
</script>
</body>
</html>when with AJAX
when() is especially useful for combining multiple asynchronous requests — say, three separate AJAX calls needed to build one page — so the final callback only runs after every request has come back successfully.
Example: when with AJAX
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.when($.get("data.php"), $.get("data.php")).done(function(r1, r2) {
console.log("Both requests finished");
});
</script>
</body>
</html>Handle Failure
If any one of the combined operations fails, the fail() callback on the combined promise runs instead of done(), which is useful when the overall task genuinely requires every one of the individual pieces to succeed. A single failure is enough to mark the whole combined operation as failed.
Example: Handle Failure
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const a = $.Deferred();
const b = $.Deferred();
$.when(a, b).fail(function() { console.log("At least one failed"); });
a.resolve();
b.reject();
</script>
</body>
</html>Use Different Delays
The individual operations passed to when() can take different amounts of time to complete, and when() will wait for the slowest one before resolving — it settles only once every operation it's tracking has finished. This makes it reliable even when the underlying tasks vary widely in duration.
Example: Use Different Delays
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
const fast = $.Deferred();
const slow = $.Deferred();
setTimeout(function() { fast.resolve(); }, 50);
setTimeout(function() { slow.resolve(); }, 300);
$.when(fast, slow).done(function() { console.log("Both finished, waited for slowest"); });
</script>
</body>
</html>Small when() Project
when() is especially valuable on pages that need several independent pieces of data — like a user profile, their recent orders, and site settings — before they can render, letting you wait for all three at once instead of chaining them unnecessarily.
Example: Small when() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$.when($.get("data.php"), $.get("data.php"), $.get("data.php")).done(function() {
console.log("Profile, orders, and settings all loaded");
});
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: