Example of Callback Function in JQuery

A callback function is a function that is passed to another function as parameter. Callback function is called inside other Function. A callback function is essentially a pattern. Use of a callback function is also known as a callback pattern.

JavaScript Compiler compiles the code line by line. Let you want to execute some block of code and then only you need to execute another block of code written just after this. For an example in the following code I want to show a alert message after the paragraph get hide. In side jquery document.ready method, here I am using Jquery selector to select the paragraph from my page & using hide method from Jquery I am hiding the paragraph.

About Callback here the hide method accepting 2 parameters. First parameter is for hiding speed & the second parameter is our Callback function. Which contains a simple alert message. This message will call only after the paragraph is hide. This is a simple example.

Example

<!DOCTYPE html>
<html>
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").hide("slow", function() {
alert("The paragraph is hide on page.");
});
});
});
</script></head>
<body>
<button>Click to hide the Paragraph</button>
<p>This is the paragraph to Hide.</p>
</body></html>