Help me understand Callbacks
I’d like to explain what I understand about callbacks and could anyone of you seasoned developers help me out please? Thanks!
Here we go..
So I think I have got down the basic definition of a callback.
“A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action”
— Mozilla Developer Network
Sure. Pretty straightforward. The question is, WHY? Why can’t we just invoke that function like every other function. Why do we need to pass it?
Also apparently, only the function definition is passed as a parameter. The function is not executed right at the argument stage. In other words, we don’t add a trailing pair of ‘()’ in front of the function while passing it as a parameter.
Now I am aware that the JS code we write on the browser runs on a single thread. So if there’s a process that would take a long time, it would block up the rest of the things in the event queue. Consider a hypothetical scenario where our code needs to execute five functions named one, two, three and four for simplicity.
The flow in the figure above shows my understanding of how a callback would work. Why use it? Because the user might not want to block the rest of the code because some code takes longer to execute, for example API calls. The callback is there to finish off the process by linking it to the main thread again.
The user grants our wish and does a bunch of actions in rapid succession. Since our code runs on a single thread, the browser puts the events in a loop in order of their detection. Let’s go back to the previous flow. Let’s say that the event handlers for these user generated events are function one(), function two(), function three(), function four() and to just clear all doubts once and for all, function five(). Five events in rapid succession.
The event queue looks something like this.
This would be a snapshot of the event queue right when the user has done performing the 5 events (at lightning speed) and now the event loop is looking to handle these one by one. This is how the event queue changes with time:
Now at this point in time, our code has started executing function three which has the callback function passed in as the parameter. Since we already knew that it would take time to execute, we decided it would be best if we could just let some other thread handle it and till its done, we can work with the rest.
And just to strengthen my understanding, lets assume that function three is finished by the other thread right after function four started executing. In other words, the callback was fired right after function four began executing. This is how it looks right now.
The event loop would not be like the figure below:
So now that I have given a brief account of my understanding on how callbacks work, please let me know if I have the slightest idea of what I am talking about. Each and every correction is appreciated.
Thanks in advance! Looking forward to finally figuring this out.