when() से कई Async Manage करना
when method कई Deferred या promise objects के लिए wait करता है। यह तब continue करता है जब supplied सभी operations succeed हो जाएँ।
In this page:
Syntax
$.when(promise1, promise2).done(function (result1, result2) {
// all resolved
});when() क्या है?
$.when() एक या ज़्यादा Deferred objects या promises लेता है और एक single combined promise return करता है जो सिर्फ तभी settle होता है जब सब settle हो चुके हों।
उदाहरण: What is when()?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
const a = $.Deferred();
const b = $.Deferred();
$.when(a, b).done(function() { $("#output").text("Both settled"); });
a.resolve();
b.resolve();
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>AJAX के साथ when
when() कई asynchronous requests को combine करने के लिए खासतौर पर उपयोगी है — मान लीजिए, एक page बनाने के लिए ज़रूरी तीन अलग AJAX calls — ताकि final call।
उदाहरण: when with AJAX
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.when($.get("data.php"), $.get("data.php")).done(function(r1, r2) {
$("#output").text("Both requests finished");
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Failure Handle करना
अगर combined operations में से कोई एक भी fail हो जाए, तो combined promise पर done() के बजाय fail() callback चलता है, जो तब उपयोगी है जब overall task।
उदाहरण: Handle Failure
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
const a = $.Deferred();
const b = $.Deferred();
$.when(a, b).fail(function() { $("#output").text("At least one failed"); });
a.resolve();
b.reject();
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>अलग-अलग Delays इस्तेमाल करना
when() को pass की गई individual operations complete होने में अलग-अलग समय ले सकती हैं, और when() resolve होने से पहले सबसे slow वाली का wait करेगा।
उदाहरण: Use Different Delays
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
const fast = $.Deferred();
const slow = $.Deferred();
setTimeout(function() { fast.resolve(); }, 50);
setTimeout(function() { slow.resolve(); }, 300);
$.when(fast, slow).done(function() { $("#output").text("Both finished, waited for slowest"); });
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>एक छोटा when() Project
when() उन pages पर खासतौर पर valuable है जिन्हें data के कई independent pieces चाहिए — जैसे एक user profile, उनके recent orders, और site settings।
उदाहरण: Small when() Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$(document).ajaxError(function(event, xhr, settings) {
$("#output").append($("<div>").text("Request failed: " + settings.url));
});
$("#runBtn").click(function() {
$("#output").empty();
$("#output").append($("<div>").text("Sending request..."));
$.when($.get("data.php"), $.get("data.php"), $.get("data.php")).done(function() {
$("#output").text("Profile, orders, and settings all loaded");
});
});
$("#resetBtn").click(function() {
jQuery(document).off();
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- promises के बजाय functions call करने के results pass करना, या कोई ऐसी value जो promise नहीं है, जबकि
$.when()को Deferred objects चाहिए जैसे$.when($.get(...), $.get(...))। - AJAX calls के लिए
done()से plain values की उम्मीद करना, जबकि हर argument एक array है जैसे[data, status, jqXHR]। - यह मान लेना कि
fail()सभी tasks का wait करता है, जबकि यह एक के fail होते ही fire हो जाता है और बाकियों का wait नहीं करता।
चैप्टर सारांश
- Deferred objects उस काम को represent करते हैं जो बाद में खत्म होता है, pending, resolved, और rejected जैसी states के साथ।
- आप deferreds बनाते और resolve करते हैं और promise pipeline methods से steps chain करते हैं।
when()कई asynchronous tasks को एक साथ manage करता है।
🔒
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: