jquery
  1. jquery-callback
PreviousNext

jQuery Callback

jQuery Callback is a function that is executed after another function has finished executing. It is commonly used in jQuery to handle actions that need to happen after a certain event occurs, such as an AJAX request completing, or a button being clicked.

Syntax

The basic syntax for a jQuery Callback function looks like this:

$.callback( options );

The options parameter refers to any additional options or parameters that the Callback function may need in order to execute properly.

Use

The main use of jQuery Callback is to specify what happens after a certain event has occurred. For example, you might want to perform a specific action after a user has clicked a button. You can use the Callback function to specify what that action should be.

Example

Here is an example of using jQuery Callback to handle an AJAX request:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Callback Example</title>
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="myButton">Click me</button>

    <script>
        // Use $(document).ready() to ensure the DOM is fully loaded before executing the script
        $(document).ready(function() {
            // Function with a callback parameter
            function showMessage(callback) {
                // Simulate an asynchronous operation (e.g., AJAX request)
                setTimeout(function() {
                    alert("Asynchronous operation completed");
                    // Call the callback function
                    callback();
                }, 2000); // Simulating a delay of 2 seconds
            }

            // Callback function to be executed after the asynchronous operation
            function callbackFunction() {
                alert("Callback function executed");
            }

            // Attach a click event handler to the button
            $("#myButton").click(function() {
                // Call the function with the callback parameter
                showMessage(callbackFunction);
            });
        });
    </script>
</body>
</html>
Try Playground

In this example, we use jQuery's $.ajax() method to make an AJAX request. We pass in a success parameter that contains a Callback function to handle the response data. We also pass in an error parameter that contains a Callback function to handle any errors that occur during the AJAX request.

Summary

jQuery Callback is a useful feature for handling actions that need to occur after a certain event has happened. It allows you to specify what should happen after a function has finished executing, and can be used in a variety of situations, such as AJAX requests and event handling. With its simple syntax and powerful functionality, jQuery Callback is a popular tool for web developers.

stop()Chaining
Published on: