Deferred स्टेट्स
एक नया Deferred pending state में शुरू होता है। इसे अभी तक resolve या reject नहीं किया गया है।
In this page:
Syntax
var dfd = $.Deferred(); // state: "pending"
dfd.resolve(value); // state: "resolved" -> done() runs
dfd.reject(reason); // state: "rejected" -> fail() runs
dfd.state(); // read the current statePending State
हर नया Deferred pending state में शुरू होता है, यानी इसका underlying task अभी किसी भी direction में खत्म नहीं हुआ है। Pending हमेशा शुरुआती state होती है।
उदाहरण: Pending State
<!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 dfd = $.Deferred();
$("#output").text(String(dfd.state()));
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>Resolved State
जब किसी Deferred पर resolve() call किया जाता है, यह resolved state में चला जाता है, और उससे attached कोई भी done() callbacks उसे pass की गई values के साथ तुरंत call हो जाते हैं।
उदाहरण: Resolved State
<!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 dfd = $.Deferred();
dfd.done(function(value) { $("#output").text(String(value)); });
dfd.resolve("done!");
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>Rejected State
जब किसी Deferred पर reject() call किया जाता है, यह rejected state में चला जाता है, और उससे attached कोई भी fail() callbacks reject() को pass की गई values के साथ call हो जाते हैं।
उदाहरण: Rejected State
<!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 dfd = $.Deferred();
dfd.fail(function(reason) { $("#output").text(String(reason)); });
dfd.reject("something failed");
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>State वापस नहीं जा सकती
एक बार कोई Deferred resolve या reject हो जाए, इसकी state वापस pending में नहीं जा सकती या दूसरे outcome में switch नहीं हो सकती — final state permanent है।
उदाहरण: State Cannot Go Back
<!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 dfd = $.Deferred();
dfd.resolve();
$("#output").text(String(dfd.state()));
dfd.reject();
// has no effect, already resolved
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</script>
</body>
</html>किसी Task में State Check करना
state() method current state को एक string (pending, resolved, या rejected) के रूप में return करता है, जो तब उपयोगी है जब आपको check करना हो कि कोई async।
उदाहरण: Check State in a Task
<!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 dfd = $.Deferred();
if (dfd.state() === "pending") {
$("#output").text("Still working");
}
});
$("#resetBtn").click(function() {
$("#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. #}
आम गलतियां
- किसी Deferred की state settle हो जाने के बाद उसे बदलने की कोशिश करना, जैसे
resolve()के बादreject()call करना, जबकि state final है और दूसरी call ignore हो जाती है। - async work शुरू करने के तुरंत बाद
dfd.state()check करना और"resolved"की उम्मीद करना, जबकि यह अभी भी"pending"है। "rejected"को code में throw हुए किसी error से confuse करना, जबकि इसका मतलब सिर्फ यह है किreject()call किया गया था।
🔒
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: