JQuery deferred.then() method - GeeksforGeeks

16 Jul, 2020
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 src="https://code.jquery.com/jquery-3.5.0.js"></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>           
<!DOCTYPE HTML> <html>  <head>     <title>       JQuery | deferred.then() method    </title>    <script src="https://code.jquery.com/jquery-3.5.0.js"></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 src="https://code.jquery.com/jquery-3.5.0.js">    </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> 
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 src="https://code.jquery.com/jquery-3.5.0.js">    </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:
jQuery-Methods
JavaScript
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?