JQuery when() method

16 Jul, 2020
This JQuery.when() method in JQuery  gives a way to execute callback functions depending on zero or more Thenable objects, which usually are Deferred objects that represent asynchronous events.
Syntax:
jQuery.when(deferreds)
Parameters:
deferreds: This parameter specifies zero or more Thenable objects.
Return Value: This method returns a Promise.
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>    <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>    JQuery.when() method    </p>    <button onclick = "Geeks();">    click here    </button>    <p id="GFG_DOWN">     </p>    <script>        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:
<!DOCTYPE HTML> <html>  <head>    <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>    JQuery.when() method    </p>    <button onclick = "Geeks();">    click here    </button>    <p id="GFG_DOWN">     </p>    <script>        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>    <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>    JQuery.when() method     </p>    <button onclick = "Geeks();">    click here    </button>    <p id="GFG_DOWN">     </p>    <script>        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>    <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>    JQuery.when() method     </p>    <button onclick = "Geeks();">    click here    </button>    <p id="GFG_DOWN">     </p>    <script>        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
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?