Skip to content
Related Articles

Related Articles

Improve Article

How to call functions after previous function is completed in jQuery ?

  • Difficulty Level : Hard
  • Last Updated : 03 Aug, 2021
Geek Week

The task is to execute a series of functions sequentially in JavaScript. That is, execute function two ONLY after the first function has completed its execution.

Syntax:

functionName();

Approach: This problem can be solved in multiple ways.

  • We can fix (hard-code) a callback function at the end of function one. Doing this makes sure that the callback function is always called when the function one finishes its execution. However, a problem with this approach is that we can’t change the callback function later at runtime. We will have to either remove that line of code OR modify it.
  • Another way is to pass the callback function as a parameter to the function one and make the function one call this new callback function at the end of its life. This approach is more flexible as it allows us to change the callback function at runtime without actually modifying any lines of code.

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.






<!DOCTYPE html>
<html>
  
<head>
    <title>
        Call a function after
        completing a function
    </title>
</head>
  
<body>
    <center>
  
        <!-- gfg variable with no value initially -->
        <h1>GeeksforGeeks</h1>
        <b>A Computer Science Portal for Geeks</b>
        <br>
        <button>Click</button>
        <p></p>
        <script src=
        </script>
        <script type="text/javascript">
            $('button').click(function() {
                console.log("Button clicked!");
                
                // Task is to execute callbackFirst
                // function first and then execute
                // callbackSecond function.
                callbackFirst();
            });
  
            function callbackFirst() {
                console.log("First Function start");
                for (var i = 1; i < 10; i++) {
                    $('p').append(i + " ");
                }
                console.log("First Function end");
                
                // Execute callbackSecond() now as its
                // the end of callbackFirst()
                callbackSecond();
            }
  
            function callbackSecond() {
                console.log("Second Function start");
                $('body').css({
                    'background-color': 'gray'
                });
                $('h1').css({
                    'color': 'green'
                });
                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 callbackFirst function first and then execute callbackSecond function. Passing callbackSecond as a parameter to the callback first.




<!DOCTYPE html>
<html>
  <head>
    <title>Call a function after completeing 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=
        </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 with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :