Updated April 20, 2023
Introduction to jQuery Deferred
In JQuery, the deferred() is a function defined as a function for creating deferred objects by calling deferred() function which is a chainable utility object by jQuery. And as jquery object is chainable this method also has its own methods by chaining directly from the object creation or saving the objects that can be stored in a variable and we can use any of these chained methods that can be invoked on these variables that have a deferred object. In general, the deferred() function is defined as a function for creating a deferred object that is used for registering the many callbacks within the callback queues, also used for invoking callbacks along with specifying the states such as failure or success, asynchronous or synchronous functions.
Working of deferred() Function in jQuery
In this article, we will discuss JQuery deferred() method which in turn has many different methods that are chained to the deferred() function which is used for enrolling multiple callbacks which are placed inside the callback queue that invokes the callbacks that are used for specifying the methods states such as success or failure with synchronous and asynchronous functions. This deferred() function returns and creates a new deferred object. Now let us see the syntax and examples below:
Syntax:
jquery.Deferred([beforestart])Parameter:
- Beforestart: this parameter is used for specifying this function which is called just before the constructor returns. In this article, we will also see different methods that are chained with this deferred() function, and a few of them are defined below:
- deferred.notify(): This function is used for calling any of the progress callbacks on a deferred object which takes args as a parameter that are passed to the progress callbacks and when this method is called then deferred.then() or deferred.progress() methods are called. Any calls made to this function after the deferred objects were created are ignored or rejected or resolved.
- deferred.then(): This method is used for calling adding handlers whenever the deferred objects are resolved or still under process or rejected and this function can filter the status and values of a deferred having null or not specified then the promise will be resolved or rejected when it returns a new promise by replacing the now-deprecated deferred.
- deferred.promise(): This function is also used for returning the deferred’s promise object. This function prevents other code from interrupting with execution or status of the internal requests which this prevention is allowed by the asynchronous functions.
- deferred.state(): This function is used for identifying the state of the present deferred’s object in a string format where the deferred object can be pending or resolved or rejected. This function is mainly used for debugging.
- Deferred.when(): This function is used when we need the callback functions to execute based on more than zero then able objects and this function returns resolved promise there are no parameters passed to this function.
Examples of jQuery Deferred
Let us see an example of the deferred() function of Jquery which uses a few of the above chainable functions in the below section:
Example #1
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Educba Institution
</title>
<script src="https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body style="text-align:left;">
<h1 style="color:blue;text-align: center;">
Demonstration of jquery's Deferred() fuction
</h1>
<p id="FUNC_UP">
</p>
<button onclick = "def_meth();">
click me
</button>
<p id="FUNC_DOWN">
</p>
<script>
varv_up = document.getElementById("FUNC_UP");
v_up.innerHTML = "Welcome to JQuery.Deferred() function";
function def_Func1(value, div){
$(div).append("This call is from doneCallbacks - " + value);
}
function def_Func2(value, div){
$(div).append("This call is from failCallbacks - " + value);
}
function def_Func3(value, div){
$(div).append("This call is from progressCallbacks - " + value);
}
function def_meth() {
vardef_obj = $.Deferred();
def_obj.then(def_Func1, def_Func2, def_Func3);
def_obj.notify( 'Deferred "def" is notified.<br/>', '#FUNC_DOWN');
def_obj.resolve( 'Deferred "def" is resolved.<br/>', '#FUNC_DOWN');
$('#FUNC_DOWN').text('In this the deferred state is ' + def_obj.state() + ' ');
}
</script>
</body>
</html>Output:
In the above screenshot when you click on the button “click me”.
In the above program, we have first created a button “click me” using on click command which is used in jquery, so when the button is clicked the deferred objects that are newly created using Deferred() function inside the function meth() which is again defined by function command. Then to display the button description we have created <p> tag with an id “FUNC_UP” which will display a message “Welcome to JQuery.Deferred() function” above the button and then we are defining functions def_Func1, def_Func2, and def_Func3 for each callbacks when it is done by doneCallbacks, for the failure of the callbacks we used failCallbacks and for the callbacks still in progress we have used progress Callbacks respectively for all 3 functions where we are passing the values and div as parameters to all these 3 functions and in turn, these 3 functions are passed as parameters to the deferred.then() function so that it can call adding handlers whenever the deferred object “def_obj” is resolved or in progress which is notified by using notify() function and are also resolved using resolve() function. In this code, we also have used state() function which when defined or declared before then() and resolves() function then the state of the deferred object will be pending and if the state() function is defined after then() and resolve() function then the state of the deferred object will show as resolved. The output of the above code can be seen in the above screenshot.
Example #2
In the below example let us see the promise() method of the Deferred() function.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Educba Institution
</title>
<script src="https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body style="text-align:left;">
<h1 style="color:blue;text-align: center;">
Demonstration of jquery's Deferred() function
</h1>
<script>
var v= {
txt: function( name )
{
alert( "Welcome " + name );
}
},
def_obj = $.Deferred();
def_obj.promise( v);
def_obj.resolve( "Educba" );
v.done(function( name ) {
v.txt( name );
}).txt( "JQuery" );
</script>
</body>
</html>Output:
In the above program, we can see we are simply displaying the welcome message using the promise() function of Deferred() function by returning the deferred’s promise object “def_obj” of variable “v” which in turn defines a function to print the welcome message with the name that is concatenated.
Conclusion
In this article, we conclude that in jquery thereid Deferred() function which is mainly a utility object which includes chained methods such as state(), then(), when(), promise(), etc, and is used for enrolling the callbacks into the callback queue. In this article, we saw how to declared and define deferred() function and how to create a new object and use the chained functions in the above examples.
Recommended Articles
This is a guide to jQuery Deferred. Here we also discuss the introduction and working of deferred() function in jquery along with different examples and its code implementation. You may also have a look at the following articles to learn more –
