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: