JQuery .Deferred() method

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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML> 
    <html>  
    <head
        <title
          JQuery.Deferred() method
        </title>
    </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>

    chevron_right

    
    

    Output:

  • Example: In this example, the Deferred() method is used and the state of Deferred object is checked.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML> 
    <html>  
    <head
        <title
          JQuery.Deferred() method
        </title>
    </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>        

    chevron_right

    
    

    • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.