You are here: Home / jQuery in Hindi / What and how jQuery AJAX deferred.done() Method works?
by on September 26, 2013

What and how jQuery AJAX deferred.done() Method works?

जब कोई Deferred Object Resolve होता है, तब हमें जिन Callback Functions को Execute करना होता है, उन Callback Functions को Deferred Object के Queue में Add करने के लिए हम deferred.done() Method का प्रयोग करते हैं। इस Function का Syntax निम्नानुसार होता है:

deferred.done( doneCallbacks [, doneCallbacks] )

ये  Method doneCallbacks के रूप  में एक  ये  दो Arguments Accept करता है जबकि Argument के रूप  में हम किसी Callback Function ये  Callback Functions के Array को Specify कर सकते हैं।

हम इस Argument के रूप  में जिन Callback Functions को Directly ये  Array of Functions के रूप  में Specify करते हैं, वे सभी Functions उस समय Automatically One by One Execute होना शु: हो जाते हैं, जब Deferred Object को Resolve करने के लिए deferred.resolve() Method को Argument ये  Without Argument Call किया जाता है।

चूंकि deferred.done() Method स्वयं एक  Deferred Object Return करता है, इसलिए यदि हम चाहें तो अन्‍य  Deferred Methods को इस deferred.done() Method के बाद Dot Operator का प्रयोग करके Chaining भी कर सकते हैं।

जब deferred.resolve() ये  deferred.resolveWith() Methods का प्रयोग करके Deferred Object को Resolve किया जाता है, तब इस deferred.done() Method का प्रयोग करके Deferred Object के doneCallbacks Queue में जिन Callback Functions को Add किया गया होता है, वे सभी One by One उसी क्रम में Execute होते हैं, जिस क्रम में इन्हें Add किया गया होता है।

//File: DeferredObject-jQueyr.DeferredConstructor-doneMethod-resolveMethod.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Asynchronous Functions - Deferred Object Handling</title>
</head>

<body>
<button>Deferred Object - </button>
<script src="../js/jquery-1.9.1.js"  type="text/javascript"></script>
<script>
function alertHello(user) {
  $('<br /><b>').text("Hello! " + user).appendTo('body');
}

function alertHi(user) { 
  $('<br /><b>').text("Hi! " + user).appendTo('body'); 
}

function alertBye(user) { 
  $('<br /><b>').text("Bye " + user).appendTo('body'); 
}

var defObject = new jQuery.Deferred();
$('<p>').text('New Deferred Object Created').appendTo('body');
$('<p>').text('Status of the newly created Deferred Object is: ' + defObject.state()).appendTo('body');
$('<hr />').appendTo('body');

jQuery(document).ready(function ($) {
  $('button').click(function () 
  {
    defObject.done([alertHello, alertHi], alertBye);
    $('<p>').text('Status of the Deferred Object after doneCallbacks: ' + defObject.state()).appendTo('body');

    defObject.resolve('Kuldeep');
    $('<p>').text('Status of the Deferred Object after resolve() Method Call: ' + defObject.state()).appendTo('body');
  });
});
</script>
</body>
</html>
जब हम इस Web Page को Web Browser में Load करते हैं, तो हमारे Web Page के Web Browser में Load होते ही निम्न JavaScript Codes Execute हो जाते हैं:
function alertHello(user) {$('<br /><b>').text("Hello! " + user).appendTo('body');}
function alertHi(user) { $('<br /><b>').text("Hi! " + user).appendTo('body'); }
function alertBye(user) { $('<br /><b>').text("Bye " + user).appendTo('body'); }

यानी सबसे पहले alertHello(), alertHi() व alertBye() नाम के तीन Function Create होते हैं और तीनों Functions Memory में Store हो जाते हैं। फिर निम्न jQuery Code द्वारा एक  Deferred Object Create होता है, जिसका Reference defObject नाम के Variable में Store हो जाता है।

var defObject = new jQuery.Deferred();

अब निम्नानुसार तीन Statements Web Page पर दो Message Display करते हैं:

$('<p>').text('New Deferred Object Created').appendTo('body');
$('<p>').text('Status of the newly created Deferred Object is: ' + defObject.state()).appendTo('body');
$('<hr />').appendTo('body');

और Create होने वाले Deferred Object की Status को Screen पर निम्न चित्रानुसार Display करते हैं:

deferred.done() Method - jQuery in Hindi

फिर जब हम इस Web Page पर दिखाई देने वाले “Deferred Button” पर Click करते हैं, तो Click करते ही निम्न jQuery Code Execute होता है:

defObject.done([alertHello, alertHi], alertBye);
$('<p>').text('Status of the Deferred Object after doneCallbacks: ' + defObject.state()).appendTo('body');

जो defObject Deferred Object के doneCallbacks Queue के लिए तीन Callback Functions को Queue में Add करता है। पहले दो Callback Functions को एक  Array के रूप  में Specify किया गया है जबकि तीसरे Callback Functions को Normal तरीके से Specify किया गया है। यदि हम चाहें, तो यहां पर किसी Anonymous Function को भी Array Elements की तरह अथवा Direct Argument की तरह Define कर सकते हैं।

चूंकि deferred.done() Method का प्रयोग करने के बाद भी जब हम defObject की Status को Check करते हैं, तो Output के रूप  में हमें अभी भी Deferred Object की Status “pending” ही दिखाई देती है क्योंकि हमने अभी तक resolve() ये  resolveWith() अथवा reject() या RejectWith() Methods को Call नहीं किया है। अब निम्न jQuery Statements Execute होते हैं:

defObject.resolve('Kuldeep');
$('<p>').text('Status of the Deferred Object after resolve() Method Call: ' + defObject.state()).appendTo('body');

इस jQuery Code के पहले Statement में हमने resolve() Method को Call किया है और उसमें Argument के रूप  में एक  String को Pass किया है।

परिणामस्वरूप  defObject नाम का Deferred Object Resolve होता है और इस Deferred Object के लिए done() Method का प्रयोग करके जिन Methods को doneCallbacks में Add किया गया था, वे सभी Callback Functions Execute होना शु: हो जाते हैं।

जब सभी doneCallbacks Execute हो जाते हैं, तब उपरोक्त Code का अगला Statement Execute होता है, जो इस बार Deferred Object की Status को “resolved” Display करता है, जिसका मतलब है कि हमारा Deferred Object Resolve हो चुका है। परिणामस्वरूप  हमें हमारा Resultant Output Web Page निम्नानुसार दिखाई देने लगता है:

deferred.done() Method - jQuery in Hindi

हम देख सकते हैं कि हमने हमारे किसी भी Function को निम्न Statement का प्रयोग करते हुए doneCallbacks में Add करते समय उनके साथ किसी Argument को Parameter की तरह Pass नहीं किया था:

        defObject.done([alertHello, alertHi], alertBye);

फिर भी जब deferred.resolve() Method Execute होता है, तो इस doneCallbacks में Specified सभी Functions को वह Argument प्राप्त हो जाता है, जिसे हमने निम्न Statement द्वारा resolve() Method में Specify किया था:

        defObject.resolve(‘Kuldeep’);

ऐसा इसलिए होता है क्योंकि resolve() Method में हम जिस Argument को Specify करते हैं, वह Argument doneCallbacks Queue में Specified सभी Callback Functions को Parameter की तरह Pass हो जाता है।

जिसकी वजह से alertHello(), alertHi() व alertBye() तीनों ही Functions को resolve() Method में Specified String “Kuldeep” Parameter के रूप  में “user” Argument को प्राप्त हो जाती है और हमें निम्नानुसार Personalized Output Messages प्राप्त होते हैं:

        Hello! Kuldeep
        Hi! Kuldeep
         Bye Kuldeep

jQuery in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook jQuery in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

jQuery in Hindi | Page:711 | Format: PDF

BUY NOW GET DEMO REVIEWS

Filed Under: jQuery in Hindi