JQuery .Deferred() method - GeeksforGeeks

16 Jul, 2020
This JQuery.Deferred() method in JQuery  is a function which returns the utility object with methods which can register multiple callbacks to queues.  It calls the callback queues, and relay the success or failure state of any synchronous or asynchronous function.
Syntax:
jQuery.Deferred([beforeStart])
Parameters:
beforeStart: This is a function, which is called just before the constructor returns.
Return Value: This method creates and returns a new deferred object.
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.Deferred() 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() 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:
<!DOCTYPE HTML> <html>  <head>     <title>       JQuery.Deferred() 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() 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 Deferred() method is used and the state of Deferred object is checked.<!DOCTYPE HTML> <html>  <head>     <title>       JQuery.Deferred() 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() method";        var def = $.Deferred();        def.resolve();        function Geeks() {            $('#GFG_DOWN').text(       'deferred state is ' + def.state());        }     </script> </body>   </html>        Output:
<!DOCTYPE HTML> <html>  <head>     <title>       JQuery.Deferred() 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() method";        var def = $.Deferred();        def.resolve();        function Geeks() {            $('#GFG_DOWN').text(       'deferred state is ' + def.state());        }     </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.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab 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 add options to a select element using jQuery?