What are jQuery hooks and callbacks?

Question

I am having a tough time conceptualizing what exactly callbacks or hooks are in jQuery. They seem to be lumped together, but I don\'t know the difference between them.

F

Answer 1

I would guess in the context you've seen the word used people mean callbacks, which are exactly what you think they are (in the case of jQuery a hook and a callback are the same thing).

A callback for jQuery's animate() function for instance will execute as soon as the animation has completed.

Some built in functions and other jQuery plugins might define multiple callbacks for various stages of of execution. For instance a plugin that displays a popup box for a user might have a callback for when the user clicks on a link to show the box, but before the box is actually displayed (this callback could be used to store some data the actual popup will need, for instance). The same popup functions might also execute a callback function when the box is closed again - this callback could be used to make a change to the page, or save some data for instance.

Answer 2

Your definition is close but insufficient. A callback is a function A that you pass to another function B (or to an object B) that B will call at the appropriate point.

For some functions, "the appropriate point" is after that function completes, as you describe.

Many functions or objects define a set of "certain points" or events when callbacks can be fired. For example, if you have a control that updates itself periodically via AJAX, it might define an event that occurs when it's about to update, an event that occurs after the update returns, and an event that occurs after the results have been displayed. For any of these events, you could pass it your custom function that should be called when that event occurs.

That defined set of points where a custom function might be called is what people mean by "hooks". They're places that you can hook your functionality into a prebuilt library.

Edited to add:

The OP asked for a simple example of a hook.

Let's say I've written a function that takes a list of usernames and is designed to go through the list, look up each person's details, and return a populated list of people objects.

Maybe I want to give the programmer making use of my function the ability to specify what should happen when a username isn't found in my database. One programmer might want the function to error out, another might want it to just ignore the missing example, another might want it to look in a different database, another might want it to construct an empty person object.

So my function signature might be something like

function getPeople( arrayOfUsernames, missingUsernameCallback )

Within the function, whenever I come to a username that I can't find in my data, I just call

missingUsernameCallback( notFoundUsername );

Now the programmer can call the function like

getPeople( ["adam","betty","charlie"], function(name){ alert("Missing username " + name)} );

and whenever I hit a missing username, I'll call the function that was passed to me.

For a more complex case, I might need to accept an object containing multiple callback functions, so it could be called like

   getPeople( ["adam","betty","charlie"], 
        {startOfListCallback:      function(){ alert("I'm starting the list")},
         missingUsernameCallback:  function(){ alert("Missing username"!)},
         endOfListCallback:        function(){ alert("I'm at the end of the list") });

etc. The list of possible callbacks will be defined by the function and should be in the API documentation (along with parameters that could be passed into the callbacks, etc.). That list of callbacks are the hooks.