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.

From what I understand from other posts about callbacks, like this, a callback is simply a function A that you pass to another function B that calls A once B is done. (That may be totally wrong, correct me if so).

I really don’t have any notion on hooks, other than the statement “you should use a hook/callback.” Something makes me doubt they’re that similar…

Answer 1

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.