jQuery Deferred .promise() method - GeeksforGeeks

16 Jul, 2020
This .promise() method in JQuery Returns a Promise object to be observed when certain type actions bounded to the collection, queued or not, are ended.
Syntax:
.promise([type][, target])
Parameters:
type: This parameter specifies the type of queue which needed to be observed.
target: This parameter specifies Object onto which the promise methods need to be attached.
Return Value: This method returns a dynamically generated Promise which is resolved once actions bounded to the collection, queued or not, have finished.
There are two examples discussed below:
Example: In this example, the Deferred() is used to create a new object and after that then() method is called with notify and resolve method.<!DOCTYPE HTML> <html>  <head>    <title>       JQuery.when() 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.when() method";        var def = $.Deferred();        function Geeks() {            $.when().then(function(a) {              alert( "when() method called this alert()." );            });        }      </script> </body>   </html>        Output:Before clicking on button:After clicking on button:Example: In this example, the Deferred() method is used and the state of Deferred object is checked.<!DOCTYPE HTML> <html>  <head>    <title>       JQuery.when() 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.when() method";        var def = $.Deferred();        function Geeks() {            $.when(def).done(function (x) {              $('#GFG_DOWN').append('when() method is executed.')            });            def.resolve();        }      </script> </body>   </html>              Output:My Personal Notes
arrow_drop_upSave
<!DOCTYPE HTML> <html>  <head>    <title>       JQuery.when() 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.when() method";        var def = $.Deferred();        function Geeks() {            $.when().then(function(a) {              alert( "when() method called this alert()." );            });        }      </script> </body>   </html>        
Output:Before clicking on button:
After clicking on button:
Example: In this example, the Deferred() method is used and the state of Deferred object is checked.<!DOCTYPE HTML> <html>  <head>    <title>       JQuery.when() 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.when() method";        var def = $.Deferred();        function Geeks() {            $.when(def).done(function (x) {              $('#GFG_DOWN').append('when() method is executed.')            });            def.resolve();        }      </script> </body>   </html>              Output:
<!DOCTYPE HTML> <html>  <head>    <title>       JQuery.when() 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.when() method";        var def = $.Deferred();        function Geeks() {            $.when(def).done(function (x) {              $('#GFG_DOWN').append('when() method is executed.')            });            def.resolve();        }      </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
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in 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 fetch data from JSON file and display in HTML table using jQuery ?
How to Dynamically Add/Remove Table Rows using jQuery ?