JavaScript

Callback Functions in jQuery | Explained

As a JavaScript developer, you may spend the majority of your time developing synchronous applications and programs. Some specific operations can only start when the previous ones are finished in these kinds of applications. However, when data is requested from an outside source such as an external API, we often have no idea when the required data will be returned.

In such cases, you have to wait for the response, but at the same time, you do not want your application to be at a halt state while the data is fetched. Adding Callback functions are useful in this situation.

This write-up will explain callback functions in jQuery with the help of appropriate examples. So, let’s start!

Callback Functions in jQuery

The statements added in a JavaScript program are executed sequentially. But, when you utilize an effect in jQuery, it takes time to perform its functionality; meanwhile, the code added in the next lines will run. To avoid this situation, jQuery offers a callback function for each jQuery effect method.

A callback function is a type of jQuery function that is executed when the added effects method finishes their operation. This function is passed as a last argument in the specific jQuery effect method.

Now, look at the syntax of the callback function in jQuery.

Syntax of jQuery Callback Functions

$(selector).effect_function(speed, callback);

In “selector“, you can add a jQuery selector for selecting the required HTML elements, and the “effect_function()” is a jQuery effect method in which you have to pass an argument for “speed” and “callback” function.

Example 1: Using Callback functions in jQuery

First of all, we will add a “Hide Paragraph” button and a paragraph in our “index.html” file:

<button>Hide Paragraph</button>
<p>This is a paragraph with sample text.</p>

In the next step, we will move towards our JavaScript file “myProject.js” and write the following code in it:

$(document).ready(function () {
  $("button").click(function () {
    $("p").hide("slow", function () {
      alert("The paragraph is now hidden");
    });
  });
});

Now, when the user clicks on the “Hide paragraph” button, the jQuery Element Name Selector “$(“p”)” will find and get the “p” or paragraph element and then hide it slowly from the web page. After doing so, the callback “function()” will be executed, and it displays an alert box in the browser:

Here is a gif that demonstrates the output of our JavaScript program:

In case, you want to check how the same program will work without a jQuery callback function, then add the below-given code in your JavaScript file:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("The paragraph is now hidden");
  });
});

Without adding a callback function, the JavaScript interpreter will operate as follows:

Example 2: Using Callback functions in jQuery

In this example, we will add a callback function for “slideToggle” jQuery effect. Before that, we will add a paragraph and a “Click me” button:

<p>This is a sample paragraph.</p>
<button type="button">Click me</button>

After that, we will write out the following code in our “myProject.js” file:

$(document).ready(function () {
  $("button").click(function () {
    $("p").slideToggle("slow", function () {
      alert("The slide toggle effect is now completed.");
    });
  });
});

The above-given code specifies that clicking the button will slowly slide down the “p” element. When this “slideToggle()” effect finishes, the callback function will be executed, and an alert box will appear on the web page stating that “The slide toggle effect is now completed”:

Check out the output of the provided program:

Now, in the same “index.html” file, we will add a heading with the “<h1>” tag:

<h1>This is heading</h1>

Next, the Element Name Selector $(“h1, p”) in the JavaScript file will find and get the h1 and p elements. Then, the paragraph will be slide down with “slow” speed and heading will be shown in its position. Lastly, the callback function will display the alert box on the browser:

$(document).ready(function () {
  $("button").click(function () {
    $("h1, p").slideToggle("slow", function () {
      alert("The slide toggle effect has completed.");
    });
  });
});

Now, the alert box will appear two times on the web page, one for the “h1” heading and the other for the “p” paragraph element:

As you can see from the above-given output we have successfully implemented Callback function in jQuery.

Conclusion

The Callback function in jQuery is a function that is executed when the added effect method has finished its execution. In a jQuery effect method, the callback function is passed to be called back later and is usually specified as the last argument. This write-up explained callback functions in jQuery and we have also provided appropriate examples related to the usage of callback functions.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.