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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  <head>
    <title>Call a fucntion 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>

chevron_right


Output:

In the console after clicking button:

Button clicked!
First Function start
First Function end
Second Function start
Second Function end


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.