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>  Â<bodystyle="text-align:center;">   Â<h1style="color:green;"> Â       ÂGeeksForGeeks Â   Â</h1>   Â<pid="GFG_UP">   Â</p>   Â<buttononclick="Geeks();">   Âclick here   Â</button>   Â<pid="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>  Â<bodystyle="text-align:center;">   Â<h1style="color:green;"> Â       ÂGeeksForGeeks Â   Â</h1>   Â<pid="GFG_UP">   Â</p>   Â<buttononclick="Geeks();">   Âclick here   Â</button>   Â<pid="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:
