This deferred.then() method in JQuery is used to add handlers which are to be called when the Deferred object is resolved, rejected, or in progress.
Syntax:
deferred.then(doneCallbacks[, failCallbacks][, progressCallbacks])
Parameters:
- doneCallbacks: This is a function, or an array of functions, which is called when the Deferred is resolved.
- failCallbacks: This is a function, or an array of functions, which is called when the Deferred is rejected.
- progressCallbacks: This is a function, or an array of functions, which is called when progress notifications are being sent to the Deferred object.
Return Value: This method method returns the deferred object.
There are two examples discussed below:
-
Example: In this example, the then() method is called with notify and resolve method.
<!DOCTYPE HTML>Â
<
html
>Â Â
<
head
>Â
   Â
<
title
>Â
     Â
JQuery | deferred.then() method
   Â
</
title
>
</
script
>Â
</
head
>Â Â Â
<
body
style
=
"text-align:center;"
>
   Â
<
h1
style
=
"color:green;"
>Â Â
       Â
GeeksForGeeks Â
   Â
</
h1
>Â
   Â
<
p
id
=
"GFG_UP"
>Â
   Â
</
p
>
   Â
<
button
onclick
=
"Geeks();"
>
   Â
click here
   Â
</
button
>
   Â
<
p
id
=
"GFG_DOWN"
>Â
   Â
</
p
>
   Â
<
script
>Â
       Â
var el_up = document.getElementById("GFG_UP");
       Â
el_up.innerHTML = "JQuery | deferred.then() method";
       Â
function Func1(val, div){
         Â
$(div).append("From doneCallbacks - " + val);
       Â
}
       Â
function Func2(val, div){
         Â
$(div).append("From failCallbacks - " + val);
       Â
}
       Â
function Func3(val, div){
         Â
$(div).append("From progressCallbacks - " + val);
       Â
}
       Â
function Geeks() {
           Â
var def = $.Deferred();
           Â
def.then(Func1, Func2, Func3);
           Â
def.notify('Deferred "def" is notified.<
br
/>'
                    Â
, '#GFG_DOWN');
           Â
def.resolve('Deferred "def" is resolved.<
br
/>'
                    Â
, '#GFG_DOWN');
       Â
}Â
   Â
</
script
>Â
</
body
>Â Â Â
</
html
>Â Â Â Â Â Â
   Â
 -
Output:
-
Example: In this example, the then() method is called with notify and reject method.
<!DOCTYPE HTML>Â
<
html
>Â Â
<
head
>Â
   Â
<
title
>Â
     Â
JQuery | deferred.then() method
   Â
</
title
>
   Â
</
script
>Â
</
head
>Â Â Â
<
body
style
=
"text-align:center;"
>
   Â
<
h1
style
=
"color:green;"
>Â Â
       Â
GeeksForGeeks Â
   Â
</
h1
>Â
   Â
<
p
id
=
"GFG_UP"
>Â
   Â
</
p
>
   Â
<
button
onclick
=
"Geeks();"
>
   Â
click here
   Â
</
button
>
   Â
<
p
id
=
"GFG_DOWN"
>Â
   Â
</
p
>
   Â
<
script
>Â
       Â
var el_up = document.getElementById("GFG_UP");
       Â
el_up.innerHTML = "JQuery | deferred.then() method";
       Â
function Func1(val, div){
         Â
$(div).append("From doneCallbacks - " + val);
       Â
}
       Â
function Func2(val, div){
         Â
$(div).append("From failCallbacks - " + val);
       Â
}
       Â
function Func3(val, div){
         Â
$(div).append("From progressCallbacks - " + val);
       Â
}
       Â
function Geeks() {
           Â
var def = $.Deferred();
           Â
def.then(Func1, Func2, Func3);
           Â
def.notify('Deferred "def" is notified.<
br
/>',
                      Â
'#GFG_DOWN');
           Â
def.reject('Deferred "def" is rejected.<
br
/>',
                      Â
'#GFG_DOWN');
       Â
}Â
   Â
</
script
>Â
</
body
>Â Â Â
</
html
>Â
-
Output: