JQuery Callback Function
Website designers use the jQuery JavaScript library to implement interactive and animated effects within their Web pages. Using jQuery functions, you can create pages with transitions enhancing the display of items such as multimedia and text. When using some jQuery effects, it is also possible to specify a callback function. As an animation can take a period of time to elapse, specifying a function as a callback ensures that it will not execute until the effect is complete.
Other People Are Reading
-
Purpose
-
HTML markup can include calls to jQuery functions. Many of these are visual effects that may take seconds, or fractions of seconds, to complete. In JavaScript, if you list one code statement after another which begins an animated effect, the second statement may begin executing before the animation has finished. To cope with this situation, many of the main jQuery functions accept callback parameters. When you pass a reference to a function as a callback parameter to another function, the callback code executes after the function receiving it has completed its own processing.
Defining Functions
-
In JavaScript, you can define functions and store them as variables. The following sample code demonstrates this:
var lovelyFunction = function() { alert("finished effect"); }
A function variable can contain multiple lines of processing with complex control structures, if necessary. JavaScript can also define functions as follows:
function lovelyFunction() { alert("finished effect"); }
Either way, the script can refer to the function using its name. If the callback function does not take parameters, the code can pass it as a callback by referring to the function name alone.
-
Passing Callbacks
-
To pass a callback function, a jQuery function call can include a function name reference, as the following code demonstrates:
$('#content').show(, 'slow', lovelyFunction);
This code calls the jQuery effect to show an element with a particular ID attribute value. The function call specifies a slow speed for the effect, and the name of a function to execute once the effect is complete. Once the jQuery show effect finishes, the flow of execution therefore moves to the function specified as the "lovelyFunction" parameter. As the function does not take any parameters, it is defined as a callback using only its name.
Callback Parameters
-
Web page scripts can pass callback functions with parameters to jQuery functions. If a callback does take parameters, the code must specify it explicitly when the jQuery function is called, as follows:
$('#content').show(, 'slow', function() {
lovelyFunction(paramValue);
});This calls the specified callback function on completion of the show effect, passing the parameter value indicated using a variable name. If a script attempts to pass a callback function with parameters using the function name alone, rather than defining it explicitly as a function, it will not work.
-
References
Resources
- Photo Credit Goodshoot/Goodshoot/Getty Images
