When I was asked what a callback function was, I immediately thought of jQuery; as we so often pass a function as a parameter to a jQuery method. Most of the time, a passed in function will execute after the initial method’s code is complete.
jQuery’s onClick Function; a Callback method.
Examine the sample below of a pretty typical function call to jQuery’s onClick event, whereby you pass a function() as a parameter… The example below includes another call to the jQuery hide function which also passes in an anonymous function which will activate when the hide function has completed.
$( "#clickme" ).click(function() {
//This call, passes a function to alert when the "hide" part is finished.
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
We can conclude that the Callback pattern is ideal for responding to html events, like the onClick event of an html button. But, this isn’t the only use-case for when to use a Callback Javascript pattern. In addition, the setTimeout() and setInterval() are examples of built-in javascript methods which follow the Callback pattern. But additionally, we may want to take advantage of the Callback pattern in our our code, specifically when we find ourselves reusing a particular piece of code, over and over. Let me provide an example.
A simple callback function
function concatenateName(firstName, lastName, callback){
//We alert the user's full name.
var fullname = firstName + " " + lastName;
alert(fullname);
//if the user passes in a function, and it is a function - fire it here.
if (callback && typeof(callback) === "function") {
callback(lastName);
}
}
var greeting = function(lastName){
console.log('Welcome Ms. ' + lastName);
};
//Call the function and pass in the "greeting" function which will log the person's name to the console.
//
fullName("Jerry", "Seinfeld", greeting);
Official Definition of Callback Function
A callback function, also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction.
When I’m coding I like to think of it as, passing in a piece of code that I would like to execute immediately after the function is complete.