If you’re fairly inexperienced with JavaScript but you’ve used jQuery, then its likely you’ve used callback functions. But maybe you don’t fully understand how they work or how they’re implemented.
In this post, which is based on what I’ve learned about callback functions in JavaScript, I’ll try to enlighten you on this fairly common technique. If you have anything to add, feel free to post a comment.
What is a Callback Function?
The above-linked Wikipedia article defines it nicely:
A reference to executable code, or a piece of executable code, that is passed as an argument to other code.
Here’s a simple example that’s probably quite familiar to everyone, taken from jQuery:
$('#element').fadeIn('slow', function() {
// callback function
});
This is a call to jQuery’s fadeIn() method. This method accepts two arguments: The speed of the fade-in and an optional callback function. In that function you can put whatever you want.
When the fadeIn() method is completed, then the callback function (if present) will be executed. So, depending on the speed chosen, there could be a noticeable delay before the callback function code is executed. You can read more about jQuery’s callback functions here.
How to Write a Callback Function
If you’re writing your own functions or methods, then you might come across a need for a callback function. Here’s a very simple example of a custom callback function:
function mySandwich(param1, param2, callback) {
console.log('Started eating my sandwich. It has: ' + param1 + ', ' + param2);
callback();
}
mySandwich('ham', 'cheese', function() {
console.log('Finished eating my sandwich.');
});
Here we have a function called mySandwich and it accepts three parameters. The third parameter is the callback function. When the function executes, it spits out an alert message with the passed values displayed. Then it executes the callback function.
Notice that the actual parameter is just “callback” (without parentheses), but then when the callback is executed, it’s done using parentheses. You can call this parameter whatever you want, I just used “callback” so it’s obvious what’s going on.
The callback function itself is defined in the third argument passed to the function call. That code has another alert message to tell you that the callback code has now executed. You can see in this simple example that an argument passed into a function can be a function itself, and this is what makes callbacks possible in JavaScript.
Here’s a CodePen that uses the simple example above:
Make Callback Functions in JavaScript Optional
One thing you’ll notice about jQuery callbacks is that they’re optional. This means if a method accepts a callback, it won’t return an error if a callback is not included. In our simple example, the page will return an error if we call the function without a callback, like this:
function mySandwich(param1, param2, callback) {
console.log('Started eating my sandwich. It has: ' + param1 + ', ' + param2);
callback();
}
// Missing required argument. Check the browser's developer tools for the error message: Uncaught TypeError: callback is not a function at mySandwich
mySandwich('ham', 'cheese');
If you look at the console, you’ll see an error that says “Uncaught TypeError: callback is not a function” (or something similar) that appears after the initial console message.
To make the callback optional, we can just do this:
function mySandwich(param1, param2, callback) {
console.log('Started eating my sandwich. It has: ' + param1 + ', ' + param2);
if (callback) {
callback();
}
}
// No third argument, but no error because we check for the callback first.
mySandwich('ham', 'cheese');
Now, since we’re checking to ensure the existence of callback, the function call won’t cause an error without it.
Make Sure the Callback is a Function
Finally, you can ensure that whatever value is passed as the third argument is in fact a proper function, by doing this:
function mySandwich(param1, param2, callback) {
console.log('Started eating my sandwich. It has: ' + param1 + ', ' + param2);
if (callback && typeof(callback) === 'function') {
callback();
}
}
// Third argument is not a function
mySandwich('ham', 'cheese', 'vegetables');
Notice that the function now includes a test using the typeof operator, to ensure that whatever is passed is actually a function. The function call has a third argument passed, but it’s not a function, it’s a string. So the test using typeof ensures no error occurs.
The CodePen below has a non-function argument passed as the callback.
A Note About Timing When Using Callback Functions in JavaScript
Although it is true that a callback function will execute last if it is placed last in the function, this will not always appear to happen. For example, if the function included some kind of asynchronous execution (like an Ajax call or an animation), then the callback would execute after the asynchronous action begins, but possibly before it finishes.
Here’s an example that uses jQuery’s animate() method:
function mySandwich(param1, param2, callback) {
console.log('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2);
$('#sandwich').animate({
opacity: 0
}, 5000, function() {
console.log('Animation complete!');
});
if (callback && typeof(callback) === "function") {
callback();
}
}
mySandwich('ham', 'cheese', function() {
console.log('Finished eating my sandwich.');
});
Notice that although the callback appears later in source order than the animation, the callback will actually execute long before the animation completes. In this case, solving this problem is easy: You just put the callback execution inside the animate method’s callback function (where it says “Animation complete”).
This doesn’t cover all the details regarding asynchronous functions, but it should serve as a basic warning that callback functions will only execute last as long as all the code in the function is synchronous.
Conclusion
Understanding how callback functions in JavaScript work is a nice technique to add to your collection of JavaScript design patterns. I hope this summary of callbacks helps you to understand this concept better. If you have anything technical to add, feel free to post a comment below.
When I need to wait on multiple animates’ calbacks or ajax requests, inside the function that calls the callback (i.e. mySandwich), I tend to use Deferred objects to sync all those timings. I’ve modified your example to include this: http://jsbin.com/ajigan/edit#preview
excellent !
This deferred thing is another world. I need to read on that! Sounds useful….:S
Ya my head just exploded… thanks for opening this window.
This should also work.
Why complicating…?
I agree. Some people find that type of notation clear, but I don’t. I like to be able to read what something does almost instantly, and that syntax just doesn’t work for me. But I know it does for some people, so that’s their preference, no problem
Seems just a cool suggestion, so use it if you like it
I agree, just seems to complicate things really. But, again, I agree… it’s a personal preference.
Does it solve any specific purpose. I think more writing causes more typos and hence more bugs. Please add if it helps more, other than as mentioned in Original Post.
My oh my… Don’t ever write these kinds of codes. Sure this one liner makes sense because it’s condensing a simple logic. If you condense more complicated logic, many people will not know what you were trying to do, and along the way you might even forget.
Great write up mate, long time javascript user but never actually figured out how callback methods worked, only recently have I needed to write my own custom callbacks!
Awesome. Was thinkin’ about this just the other day.
I’ve tried this before when I needed it for another project but never managed to get it working. At the time I could only find examples of people adding callbacks to plugins.
This will come in handy in the future and I have booked marked this page for reference! Thanks for such a simple, yet powerful and useful article.
This is a really good writeup. I like that you include the bit about asynchronous calls because that is something that can be maddening until you first begin to understand the concept at work.
One thing you may want to discuss is using a specific method signature with a callback (more often referred to as a delegate, but basically the same thing) to allow for callbacks that take parameters. For example, to receive a more detailed response about the type of sandwich you could do the following:
I think another good example would be how to run a callback that receives arguments and has ‘this’ set to something other than the global object. i.e.:
Thanks for throwing in an example using call/apply!
Your snippet is the best example to understand how
applyworks in Javascript Callbacks.Under “Make Sure the Callback is a Function” you just need to do this
Checking if it’s defined & a function is an extra, unneeded step.
Thanks for the post. Already coming up with ideas to use callbacks in my code. Wish I had read this post 2 projects ago, would have saved me some time.
Great write up mate, long time JavaScript user but never actually figured out how callback methods worked, thanks for shearing!
This looks great and easy. Thanks for the examples. I still have problems implementing it here:
I’ve been told that to use value in alert I need something like a callback but I cannot implant it for this…
Don’t use an anonymous function
function(key, value){ alert(“The value for ‘” + key + “‘ is ‘” + value + “‘”); })
but rather a separate stand-alone function
function myAlertFunction(key, value) { alert(“The value for ‘” + key + “‘ is ‘” + value + “‘”); }
which you then call as:
remoteStorage.requestValue(“something”, myAlertFunction(key, value));
Function closure will (should!) guarantee that you see your key/value values.
Thanks a bunch, very useful article :)
I was just looking for the definition of a callback function and I found this! Awesome post!
I just found this, which looks quite relevant to this discussion:
http://callbackhell.com/
Thanks a lot…
This post helped me to understand what callback functions are…
keep up the good work
I am new to javascript world. This was really helpful. thx.
excellent article. Great help to OO developers playing round with JS
Thnx! I learned something today :D
Fantastic work on breaking this all down Louis.
We’ll be sending our newbie JS developers to this page to help them understand the basics of callbacks!
Now, I can use callback in javascript.
Thanks!
Best write-up about callbacks on the net. Ever. Kudos to you.
This thread tells you why:
http://www.codingforums.com/showthread.php?p=1293028#post1293028
Thanks Luke. This page has actually been getting pretty steady traffic via search, and most of the comments here have been pretty positive. Glad everyone likes it.
Excelent article, it helps me a lot!
Much heavier content in this one, but relevant to those considering heavy use of nested callbacks:
http://adamghill.com/2012/12/02/callbacks-considered-a-smell/
Apart from your Post, the best I have seen on callbacks is here”:
http://recurial.com/programming/understanding-callback-functions-in-javascript/
Much obliged for this. Trying to sort out callbacks from the FileReader object. This article was very helpful for that.
Simple but clearly and really great!
Thanks :)
short and sweet……thanks
Just what I was looking for! Jquerymobile refresh listview and selectmenu Need a callback function for this after dynamically creating them. Thanks!
Extremely Helpful !!
Perfect was thinking about this lately and you explained it nicely.
Good Job
It was indeed very helpful for a someone like me who is new to js…..
Many thanks
In javascript, the callback definition you quoted on wikipedia is confusing, I found it gave me the better understanding: “A callback function (in jquery) is executed after the current effect is 100% finished”. in w3schools.
Your callback example is clear and easy to follow, but in practice, it’s the same effect to put all codes in order in a javascript file. For example, I trid to load a css file before showing a form in javascript, I would have the same effect to use callback function you suggested or to put all codes in order without the function. However, the solution is suggested this post “http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file”, binding event onreadystatechange or onload to the callback function. It works for me.
Yes, you’re right, JS lines will load in order of appearance. However, as I understand things, the new lines that run don’t wait for the previous lines to finish. So in some cases (as in the case of a long animated effect like a fade out), you need a callback to ensure the previous code is completely finished before loading the next line.
So while in some cases you can get away with one line after another, there are other cases where you absolutely need the previous code to finish first, in which case you need a callback.
Very easy to understand. Thank you for your informative content.
thanks a lot :)
Very helpful post. Thanks a lot. My understanding of Javascript just went up a notch.
One of the best articles I’ve read. I went from being confused about how to create a callback function to understanding the concept fully in about 20 seconds flat. Thanks :)
Excellent…
Thanks, great information to remind things even if you already read about callback :)
Thank you. I’m fairly new with both JS and JQuery so before reading this post I found callback functions quite magical. :D I keep forgetting to treat functions as objects/variables as well.
Thanks for this introductory lesson, mate
Thank you. Very useful article.
Saved my day !
very nice article
Thanks. I use your example when explaining Callbacks to those not familiar with it.
Good and easy to understand artical. Thanks for sharing.
Thank God!!. You saved me!!
Great Tutorial that I’ve ever seen on javascript callback.
Easy to understand. Impressive~!!
Again, I really appreciate your GREAT Effort!!
Hi Luis,
I would like to know why a callback function such:
Don’t works inside another function, as in the example bellow:
On the above example the tmpl variable is never loaded, even knowing the “d” variable has the content, because it is shown in the alert box.
I’ve worked around it calling “$.get” outside the scope of the function, to previously load the variable tmpl, and then use it inside the function, but I would like to understand what happened and why.
Best Regards,
Flavio
I’m not sure… Can you set up a test JS Bin or something so I can see what you’re talking about? It seems to work fine for me:
http://jsbin.com/eSUHija/1/edit
But I’m not entirely sure if that’s how you want it structured…?
awesome post, read a few on this subject that didn’t make much sense. Guess more examples have to be about lunch :)
Hello,
great, well written article. But what do you do if your callback function is not only a function but a method of a certain object?
How do you define (if necessary) and pass this object along with its callback method to your function?
Reason for asking: I will have to call a function in a framework which demands a callback object. Inside this function, the callback object’s method onCompletion(param1,param2) will be called.
How can I get hold of param1 and param2?
Thank you very much in advance.
I think you could just do something like this:
I might be wrong though, you’d have to test it. Notice I’ve added params for the callback reference. Again, I’m not 100% sure this is what you want, but in theory I believe this should work.
you can use a closure to pass the function with parameters
You made my life easier.I found this place perfect to learn about CALLBACKS :)
This was a great article – very clear, I now know how to use callbacks!
Awesome Post man !!! helped me to pick up with the basics for the callback Concept. keep the great work Going !! Thanks
Thanks. For some reason I was struggling with Javascript callbacks – this post cleared it up.
You have my thanks, too. Cleanest article to explain JS callbacks at the moment. That CallbackHell comment is also useful.
Thank you!
Surely the clearest and simplest tutorial for callback() functions on the whole internet.
I’m going to add your website in the “Must Read” zone of my Favourites! ;)
Great article. Thanks, helped me.
But for timing you can do it like this:
Wow I was so confused about callbacks and it really helped me. Thanks
I would agree that this is the best write-up I have seen regarding callbacks. However, now that I understand it better, why would you not just call the subsequent functions directly and remove the entire callback process. For instance, using callbacks I could process three steps with the following:
However, why is this any different than the following?
I do see the possibility of changing the step sequence by dynamically changing the function calls using callbacks. But, if I want to process multiple functions in a certain sequence, why can’t I just call tham as explained above?
In my examples, I don’t think there is any difference from yours. Mainly, callbacks are beneficial when you’re dealing with processes that could ‘block’ other stuff from happening. See the explanation here:
http://stackoverflow.com/questions/7070495/why-use-callback-in-javascript-what-are-its-advantages
Callbacks are great when dealing with asynchronous actions (usually Ajax or animations), so you can still run other code on the page without blocking anything else, and when the asynchronous action completes, you’ll get a ‘notice’ when it’s done, via the callback.
Probably I could write a separate article explaining this, because now that I look at my code above, it is pretty simple and isn’t exactly the ideal use case for callbacks.
Thanks, Louis! It was a good education for me.
Hi Louis,
I’m learning Javascript and I’m getting crazy with a case.
I´ve got some calls on my html code to a function just like this:
‘ onclick=”fisrt(1)” onclick=”fisrt(2)” ‘ …
And my js look like this:
So I need function first() to wait function second() to finish if the condition is met.
I hope you can help me and thanks in advanced.
Nice article.
However, why wouldn’t one use the following approach:
it’s a bit annoying to have that line on top of every function expecting an optional callback but that way your callback calls are free of any also annoying checks for callback existence, wherever they may appear and regardless of how many times.
Thoughts? Is there any good reason to avoid this construction?
Your code is probably better. Generally, when I write JS, I’m a bit overly-precise on clarity of code. I find the code you used to be a bit confusing at first glance, so for tutorials (and even my own projects) I prefer a more explicit approach.
But for sure, yours seems to be much more efficient, and I don’t see any problems with it. :)
nice article ! its very clear to be understood by a beginner . Thank you !!
Very comprehensive post– I especially liked how you put HTML + jQuery + Callbacks together using the JSBin. It really helps me tie together how each of elements fit together :)
How can we return values by callback functions?
thank you for your post
Your post was a long time ago but I am extremely grateful for your clear and simple explanation of actually writing a callback function. I come from Pascal and Javascript is weird and exciting. I have listened to lectures by Douglas Crockford but the real clincher is the coder who says, here this is how you actually write it.
Thanks
Hi,
Many thanks for this article, I#m trying to get my iOS app to show imageName. This is my function
on iOS, i do:
The function executes because the alert with the correct imageName appears.
I just can’t get that name to my iOS app. iOS uses actually wants the last value in getImageURL and thats what results become.
I don’t know the answer to your question. I’m not sure I fully understand it either. You might want to try StackOverflow or another similar forum.
Thank you!!! After reading so many sites about this topic, I finally found the one I needed to understand it.
good post! best one I have read on callbacks yet!
Awesome explanation,have searched whole web but this one cleared the basic concept of callback function.
Thanks a ton :)
Perfect article !
Thanks a lot for this perfect article.
Good forum, I was sent here by OneSignal, I wanna try to make out the callback function in Javascript.
Thanks since from now.
Congratulations to all.
Great post. Very clear explanation of callback
Nice but i need to return a result after completed web services calling. Please help me.
Clear, concise, and heavily example-laden explanation. Thank you!
Thanks A lot Sir
Thank you so much for this. I’ve been trying to wrap my head around these as self-taught JS and now I finally get it, implemented it and it works :)
Thanks again!
I know this is an old article but it holds up so well – it is by far the best one I’ve read yet on understanding how callbacks work, especially to newbies like me who have little understanding of JS. You actually just helped me code my first real callback function with AJAX so cannot thank you enough!
Hi Louis, thanks for your invaluable article about callback function. I especially liked that you mentioned the point about “Make sure the callback is a function”. We, Javascript developers, works with callbacks a lot. If we remember this point while working, we will be able to write a clean error-free code.