How to resolve a deferred object when the user clicks a button using jQuery ?

Last Updated : 17 Jan, 2023

A deferred object in jQuery represents an operation that is still in progress and can be resolved at a later time. Deferred objects are often used in jQuery to handle asynchronous operations, such as making AJAX requests or waiting for a DOM element to become available. When a deferred object is resolved, it can trigger a callback function to execute, allowing you to perform some action when the deferred operation is complete.

In this article, we will look at how to resolve a deferred object when the user clicks a button using jQuery. We will first discuss the approach to solving this problem and then provide the syntax and two complete code examples that demonstrate how to do it.

Approach: To resolve a deferred object when the user clicks a button using jQuery, you can use the following approach:

Create a deferred object using the $.Deferred() function.
Bind a click event to the button using the .click() function.
Inside the click event handler, resolve the deferred object using the .resolve() function.
Bind a done callback function to the deferred object using the .done() function.
Inside the done callback function, include the code that you want to execute when the deferred object is resolved.

Syntax: The following is the syntax for creating a deferred object and resolving it.

var deferred = $.Deferred();
deferred.resolve();

The following is the syntax for binding a done callback function to the deferred object:

deferred.done(function() {
    // Code to execute when deferred object is resolved
});

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
    <script>
        $(document).ready(function () {
            // Create deferred object
            var deferred = $.Deferred();

            // Bind click event to button
            $('#button').click(function () {
                // resolve deferred object
                deferred.resolve();
            });

            // Bind done callback to deferred object
            deferred.done(function () {

                // Display message when deferred object
                // is resolved
                $('#message').text(
                    'Deferred object resolved'
                );
            });
        });
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: grid;
            place-content: center;
            background-color: white;
            color: black;
        }


        ::selection {
            color: white;
            background-color: green;
        }

        button {
            border: 2px dotted white;
            margin: 20px;
            padding: 10px;
            width: fit-content;
            font: 20px;
        }
    </style>
</head>

<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>

    <p>How to check the lock-state of a
        callback list using jQuery?
    </p>
    <button id="button">Click me</button>
    <div id="message"></div>
</body>

</html>

Output:

Explanation: In this example, we have an HTML page with a button and a message element. When the user clicks the button, we want to resolve a deferred object and display a message.

To achieve this, we first include the jQuery library in the HTML page and then use the $(document).ready() function to ensure that the code will execute when the DOM is fully loaded.

Inside the $(document).ready() function, we create a deferred object using the $.Deferred() function. This creates an object that can be resolved at a later time.

Next, we bind a click event to the button using the $('#button').click() function. This function will execute when the user clicks the button. Inside the click event handler, we use the deferred.resolve() function to resolve the deferred object.

Finally, we bind a done callback function to the deferred object using the deferred.done() function. This function will execute when the deferred object is resolved. Inside the done callback function, we use the $('#message').text() function to update the text of the message element with the string "Deferred object resolved".

When the user clicks the button, the click event handler will execute and the deferred object will be resolved. This will trigger the done callback function to execute, causing the message to be displayed.

How to get server response from an AJAX request using jQuery ?

satyamm09

Improve

Article Tags :

How to resolve a deferred object when the user clicks a button using jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?