Using Callback Function in jQuery

This article shows how to use a callback function in ASP.NET using jQuery. In this article, you will see in which situation we use callback functions. The examples below define both situations, with and without callback functions.

Callback Function

The callback function is used to stop the execution of the current effect of the animation in jQuery or a callback function is executed after the current effect has been completed.

Syntax

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

Problem: Why we use a Callback Function ?

There are many languages (like C and C++) that start execution sequentially. We know that jQuery is based on JavaScript. So the code in jQuery will also execute sequentially. When we use animation in jQuery the execution order of code will be changed. In other words it will execute the next line of the code without waiting to complete the first line. If you want the callback function to be called after the animation has completed then you would have to hook the completion function of the animation and call the callback then.

Solution

To prevent this, you can create a callback function.

Example ( Without Callback Function)

First of all you start Visual Studio .NET and make a new ASP.NET web site using Visual Studio 2010. The example below has no callback parameter, and the alert box will be displayed before the hiding is completed.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RefreshPage.aspx.cs" Inherits="RefreshPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="Registration/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

$("button").click(function () {

$("#div1").hide(1000)

alert("The paragraph is now hidden");

});

});

</script>

</head>

<body>

<h2>

This is a heading</h2>

<div id="div1">

jQuery is great library for developing ajax based application.

<br>

jQuery is great library for the JavaScript programmers, which simplifies the development

of web 2.0 applications.<br />

<br />

<br />

</div>

<button>

Hide</button>

</body>

</html>

Output

Now click on the Hide Button. It will display an alert message without hiding the paragraph.

Example (With Callback Function)

The example below has a callback parameter that is a function that will be executed after the hide effect is completed.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RefreshPage.aspx.cs" Inherits="RefreshPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="Registration/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

$("button").click(function () {

$("#div1").hide("slow", function () {

alert("The paragraph is now hidden");

});

});

});

</script>

</head>

<body>

<h2>

This is a heading</h2>

<div id="div1">

jQuery is great library for developing ajax based application.

<br>

jQuery is great library for the JavaScript programmers, which simplifies the development

of web 2.0 applications.<br />

<br />

<br />

</div>

<button>

Hide</button>

</body>

</html>

Output

Now click on the Hide Button to see the effect of the Callback Function.