Everybody's favorite: concept video time! Callbacks are an important concept in JavaScript. They are functions that are called when an action has completed running. Then lend structure and timing to our code.

Take for example the animation we used in the last video. Animations take time to run. What if you want to have something else happen right when that animation finishes? Do you have to do a setTimeout for the same length as the animation? Nope. jQuery gives us callback functions used just for that purpose.

They are typically an additional parameter that we pass to the method. In the case of animation, we pass a function as the last parameter. That is the callback function, and will be called when the animation is complete.

  // stuff to animate
}, function() {
  // callback function

That looks a little funky perhaps, but essentially we're just doing:

.animate(a, b)

Where a is an object of properties and values, and b is a callback function.

But we know from the last video that animation can also take a timing parameter that specifies how long an animation will take. Where does that go? That's an optional parameter, just like the callback function is. If we wanted to use it, we'd put it right in the middle, so essentially:

.animate(propertiesObject, duration, callback);

And there is another optional parameter too, a string we can pass to specify an easing value.

.animate(propertiesObject, duration, easing, callback);

jQuery just happens to be cool and smart about those optional parameters. If you leave out the middle two and just pass the callback, it can tell what you are passing is a function, not a number or string, so it knows you mean a callback function. You don't have to pass in bogus values or anything. That's just good API design!

When you look at the jQuery documentation, they show it like this:

.animate( properties [, duration ] [, easing ] [, complete ] )

Then right after explain the expected types.

But anyway, back to callbacks. You can get pretty nested. Imagine putting another animation in the callback function, and that animation has its own callback. That's perfectly reasonable, as you might want to do a multi-step animation. You just need to stay organized.

See the Pen 450c5810be27a9a8946cb8012cbd1213 by Chris Coyier (@chriscoyier) on CodePen

We're just using animation as an example here. Perhaps an even more common use of callback functions is Ajax. Ajax is when the browser calls out for another resource without refreshing the page. That can take a completely unknown amount of time. It depends on bandwidth and latency and the size of the file and error conditions and all kinds of stuff. You likely can't do anything with that Ajax request until you get something back or otherwise more information. Callback functions are perfect for that, and we'll get into that later on.


  1. Matt Larsh
    Permalink to comment#

    The code is blurry for me in this vid.

  2. daniel.jeffery
    Permalink to comment#

    I could be wrong – but I don’t think you need semi-colons after those function declarations – but you would use them if you were using a function expression, i.e a variable.

    Is that right or not?

  3. Chris Coyier
    Permalink to comment#

    Like these?


    I think it’s kinda optional. ASI (Auto Semicolon Insertion) will handle it for you as it parses, but whatever might as well do it yourself and potentially save yourself some grief down the road.

    • daniel.jeffery
      Permalink to comment#

      Umm, those weren’t the ones – because they come after a closing paren. The ones after the function declarations, because there are no parens …

      This is my understanding.

      Function Declaration:

      function() moveBox() {
        // No semi-colon needed (for mystical reasons)

      Function Expression:

      `var moveBox() = function(){
        // Semi-colon 'needed' (JavaScript mysteries!) 

      I think that is what I read in my big fat nerdy JavaScript book. To all intents and purposes I am a noob, so I may be wrong.

      The larger point is that whether you add the semi-colon or not for a function declaration it works, which is obviously the most important thing – i.e it doesn’t create an error – so I learned something either way.

      Seeing as this is quite a trivial point, just thought I’d give a little feedback on your lodge courses, especially this one. You have a great understanding of what does and doesn’t matter in terms of concepts and work-flow etc, and you strike a great balance between practical and theoretical, which I have not found in any other courses that I have watched.

      I haven’t really put any of my JavaScript skills to good use yet, but I plan to in the future – but I have a good grasp of the syntax and all of that awesome stuff.

      Looking forward to what you come up with next – you’ve got a good flow going now so I hope that you keep pumping them out!

      (Was going to add an image to demonstrate the part I was referring to, but don’t really know how), but it’s at 4:00 in the video. Once again it’s a very trivial point, and I’m sure you’ve got more important things to think about!)

    • daniel.jeffery
      Permalink to comment#

      Fixing a typo.

      var moveBox() = function(){
        // Semi-colon 'needed' (JavaScript mysteries!) 
    • daniel.jeffery
      Permalink to comment#


      Just for anyone else who stumbled across that and was curious.

  4. Freddie
    Permalink to comment#

    I’ve had a Jquery / javascript aha moment watching this screencast!

    It’s finally starting to sink in. Thank you, great content

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.