How to call functions after previous function is completed in jQuery ?
Last Updated :
27 Sep, 2024
In jQuery, to call a function after a previous function is completed, you can use callback functions. A callback ensures the second function executes only after the first one finishes, maintaining proper sequence in asynchronous operations or animations.
Syntax
functionName();
Approach: This problem can be solved in multiple ways.
- Button Click Event: When the button is clicked, a function is triggered that logs "Button clicked!" to the console.
- Callback Chain: The callbackFirst() function is called, passing callbackSecond() as an argument to be executed later.
- First Function Execution: Inside callbackFirst(), numbers 1 to 9 are appended to the paragraph, and messages are logged.
- Callback Execution: After callbackFirst() completes, it calls callbackSecond(), ensuring the second function runs only after the first.
- Second Function Execution: callbackSecond() changes the background color to green and the heading's color to black, completing the callback.
Let's take a look at each of them in detail.
Example 1: In this example, we will fix (hard-code) a callback function at the end of function one.
html
<!DOCTYPE html>
<html>
<head>
<title>Call a function after completing a function</title>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>A Computer Science Portal for Geeks</b><br>
<button style="color: green;">Click!</button>
<p></p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script type="text/javascript">
$('button').click(function () {
console.log("Button clicked!");
// Execute callbackSecond at the end
// of its execution
callbackFirst(callbackSecond);
});
function callbackFirst(callbackFn) {
console.log("First Function start");
for (var i = 1; i < 10; i++) {
$('p').append(i + " ");
}
console.log("First Function end");
/* Execute callbackFn() now as its
the end of callbackFirst() This
function was passed as a parameter */
callbackFn();
}
function callbackSecond() {
console.log("Second Function start");
$('body').css({
'background-color': 'green'
});
$('h1').css({
'color': 'black'
});
console.log("Second Function end");
}
</script>
</center>
</body>
</html>
Output:
In the console after clicking button:
Button clicked!
First Function start
First Function end
Second Function start
Second Function end
Example 2: In this example, we will pass a callback function as a parameter to the function one so that it can call this new callback function at the end of its execution. The task is to execute the callbackFirst function first and then execute the callbackSecond function. Passing callbackSecond as a parameter to the callback first.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Call a function after completing a function</title>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<b>A Computer Science Portal for Geeks</b><br>
<button style="color: green;">Click!</button>
<p></p>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script type="text/javascript">
$('button').click(function () {
console.log("Button clicked!");
// Execute callbackSecond at the end
// of its execution
callbackFirst(callbackSecond);
});
function callbackFirst(callbackFn) {
console.log("First Function start");
for (var i = 1; i < 10; i++) {
$('p').append(i + " ");
}
console.log("First Function end");
/* Execute callbackFn() now as its
the end of callbackFirst() This
function was passed as a parameter */
callbackFn();
}
function callbackSecond() {
console.log("Second Function start");
$('body').css({
'background-color': 'green'
});
$('h1').css({
'color': 'black'
});
console.log("Second Function end");
}
</script>
</center>
</body>
</html>
Output:
In the console after clicking button:
Button clicked!
First Function start
First Function end
Second Function start
Second Function end
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous for its philosophy of “Write less, do more". You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.
Similar Reads
How to call a function that return another function in JavaScript ? The task is to call a function that returns another function with the help of JavaScript is called a Currying function, a function with numerous arguments that can be converted into a series of nesting functions with the help of the currying method. Approach:Define Outer Function:Create an outer fun
2 min read
How to use jQuery library and call functions from it ? In this article, we will see how we can include the jQuery library in the code & use the different call functions. We will be adding some animation effects to see its uses. jQuery is a lightweight JavaScript library that was built to simplify complex JavaScript tasks by generalizing various conc
7 min read
How to call a function automatically after waiting for some time using jQuery? In order to run a function automatically after waiting for some time, we are using the jQuery delay() method. The .delay() method in jQuery which is used to set a timer to delay the execution of the next item in the queue.Syntax: $(selector).delay(para1, para2); Approach: When the Button is clicked
2 min read
How to hide div element after few seconds in jQuery ? Given a div element, the task is to hide the div element after a few seconds using jQuery. Approach:Select the div element.Use delay function (setTimeOut(), delay()) to provide the delay to hide() the div element.Example 1: In this example, the setTimeOut() method is used to provide a delay to the f
2 min read
How to call a function when content of a div changes using jQuery ? The task is to call a function when the content of a div is changed. You can achieve this task by using the in-built method known as .change(). In simple words whenever the field is been changed we call a function that will throw a pop-up. .change(): This method will only trigger when some change oc
2 min read
Which function is used to prevent code running before document loading in jQuery ? In this article, we will learn how to prevent code from running, before the document is finished loading. Sometimes we might need to run a script after the entire document gets loaded, for example, if we want to calculate the size of images in the document then we need to wait until the entire docum
2 min read
How to define jQuery function ? Defining the function in jQuery is different from JavaScript, the syntax is totally different. A function is a set of statements that takes input, do some specific computation and produce output. Basically, a function is a set of statements that performs some specific task or does some computation a
2 min read
How to implement a function that enable another function after specified time using JavaScript ? Let us assume that we have been given a function add() which takes in two parameters a and b, and returns their sum. We are supposed to implement a function that should be able to call any function after the given delay amount of time. This can be done with the approaches as given below: Approach 1:
2 min read
How to run a code on click event in jQuery ? In this article, we will see how to run the code after clicking on an event. To run the code after clicking an event, we use the click() method. The click() method is used to run the code when a click event occurs. The click() method to attach a click event handler to selected elements. Inside the h
1 min read
How to call Hook into dialog close event in jQuery UI ? In this article, we are going to learn how we can call Hook into a "dialog" close event in jQuery UI. To call a hook into the dialog "close" event in jQuery UI, we will use the close event provided by the dialog widget. This event is fired when the dialog is closed. Let's understand what a hook is,
2 min read