JQuery deferred.then() method
Last Updated :
01 Aug, 2024
This deferred.then() method in JQuery is used to add handlers which are to be called when the Deferred object is resolved, rejected, or in progress.
Syntax:
deferred.then(doneCallbacks[, failCallbacks][, progressCallbacks])
Parameters:
- doneCallbacks: This is a function, or an array of functions, which is called when the Deferred is resolved.
- failCallbacks: This is a function, or an array of functions, which is called when the Deferred is rejected.
- progressCallbacks: This is a function, or an array of functions, which is called when progress notifications are being sent to the Deferred object.
Return Value:
This method method returns the deferred object. There are two examples discussed below:
Example: In this example, the then() method is called with notify and resolve method.
html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery | deferred.then() Method</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #e8f5e9;
font-family: 'Arial', sans-serif;
}
.container {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
width: 80%;
max-width: 500px;
}
h1 {
color: #2f8d46;
margin-bottom: 20px;
font-size: 24px;
}
p {
font-size: 18px;
margin: 10px 0;
color: #333;
}
button {
background-color: #2f8d46;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
}
button:hover {
background-color: #276b39;
}
#GFG_DOWN {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<p id="GFG_UP">JQuery | deferred.then() method</p>
<button id="actionButton">Click Here</button>
<div id="GFG_DOWN"></div>
</div>
<script>
function func1(val) {
$('#GFG_DOWN').append("<p>From doneCallbacks - " + val + "</p>");
}
function func2(val) {
$('#GFG_DOWN').append("<p>From failCallbacks - " + val + "</p>");
}
function func3(val) {
$('#GFG_DOWN').append("<p>From progressCallbacks - " + val + "</p>");
}
function Geeks() {
let def = $.Deferred();
def.then(func1, func2, func3);
def.notify('Deferred "def" is notified.');
def.resolve('Deferred "def" is resolved.');
}
$(document).ready(function() {
$('#actionButton').on('click', function() {
$('#GFG_DOWN').empty(); // Clear previous output
Geeks();
});
});
</script>
</body>
</html>
Output:
Outpu1Example: In this example, the then() method is called with notify and reject method.
html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery | deferred.then() Method</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #e8f5e9; /* Light green background */
font-family: 'Arial', sans-serif;
}
.container {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 30px;
text-align: center;
width: 80%;
max-width: 500px;
}
h1 {
color: #2f8d46; /* GeeksforGeeks green color */
margin-bottom: 20px;
font-size: 24px;
}
p {
font-size: 18px;
margin: 10px 0;
color: #333;
}
button {
background-color: #2f8d46;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
}
button:hover {
background-color: #276b39;
}
#GFG_DOWN {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<p id="GFG_UP">JQuery | deferred.then() method</p>
<button id="actionButton">Click Here</button>
<div id="GFG_DOWN"></div>
</div>
<script>
function func1(val) {
$('#GFG_DOWN').append("<p>From doneCallbacks - " + val + "</p>");
}
function func2(val) {
$('#GFG_DOWN').append("<p>From failCallbacks - " + val + "</p>");
}
function func3(val) {
$('#GFG_DOWN').append("<p>From progressCallbacks - " + val + "</p>");
}
function Geeks() {
let def = $.Deferred();
def.then(func1, func2, func3);
def.notify('Deferred "def" is notified.');
def.reject('Deferred "def" is rejected.');
}
$(document).ready(function() {
$('#actionButton').on('click', function() {
$('#GFG_DOWN').empty();
Geeks();
});
});
</script>
</body>
</html>
Output:
Output2
Similar Reads
JQuery deferred.state() method
This deferred.state() method in JQuery is used to determine the current state of a Deferred object. Syntax: deferred.state()Return Value: This method returns the state of deferred object. There are two examples discussed below: Example: In this example, the state of deferred object 'def' is pending.
2 min read
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])P
2 min read
JQuery deferred.pipe() Method
The deferred.pipe() method in jQuery is used to add utility method to filter, chain Deferreds.Syntax:deferred.pipe([doneFilter][, failFilter][, progressFilter])Parameters: This method accepts three parameter as mentioned above and described below:doneFilter: It is an optional function which is calle
2 min read
JQuery deferred.notify() method
This deferred.notify() method in JQuery is used to call the progressCallbacks on a Deferred object with the given parameters. Syntax: deferred.notify(params)Parameters: params: This is optional parameters which are passed to the progressCallbacks. Return Value: This method method returns the deferre
2 min read
jQuery deferred.reject() Method
The deferred.reject() method in jQuery is used to reject a Deferred object and call any failCallbacks with the given arguments.Syntax:deferred.reject( [args] )Parameters:args: It is an optional parameter that are passed to the failCallbacks.Return Value: This method returns the deferred object.Examp
1 min read
jQuery Deferred .promise() method
This .promise() method in JQuery Returns a Promise object to be observed when certain type actions bounded to the collection, queued or not, are ended.Syntax:.promise([type][, target])Parameters:type: This parameter specifies the type of queue which needed to be observed. target: This parameter spec
2 min read
JQuery deferred.resolve() method
This deferred.resolve() method in JQuery is used to resolve a Deferred object and call any doneCallbacks with the given arguments. Syntaxdeferred.resolve([args])Parametersargs: This is optional parameters and is arguments which are passed to the doneCallbacks. Return ValueThis method returns the def
2 min read
JQuery deferred.notifyWith() method
This deferred.notifyWith() method in JQuery is used to call the progressCallbacks on a Deferred object along with the provided context and args. Syntax: deferred.notifyWith(context[, args])Parameters: context: This parameter is the context passed to the progressCallbacks as the 'this' object. args:
2 min read
jQuery deferred.progress() Method
This deferred.progress() method in jQuery is used to add handlers which are to be called when the Deferred object generates progress notifications.Syntax:deferred.progress(progressCallbacks[, progressCallbacks])Parameters:progressCallbacks: This parameters is a function, or array of functions, which
2 min read
jQuery deferred.rejectWith() Method
This deferred.rejectWith() method in jQuery is used to reject a Deferred object and call the failCallbacks along with the given context and arguments. Syntax: deferred.rejectWith(context[, args])Parameters: context: This parameter is the context passed to the failCallbacks as the 'this' object. args
2 min read