A basic callback hell

Help me understand Callbacks

I’ve had it. I am trying to understand the basics of JavaScript to become a better frontend developer and every time I try to clear any doubts that I have about callbacks, I get new ones. It is annoying and frustrating and I need to understand where I am going wrong.

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.

A hypothetical scenario explaining the sequence of actions

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.

I also am aware that JavaScript is not restricted to the browser anymore but to just understand better, I would like to explain my understanding using an event queue. Lets say the DOM is all loaded up and we are waiting on the user to perform some ‘event’ so our code can handle it.

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.

The event queue before any execution takes place

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:

As the events are handled by our code, this is how the queue changes

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 queue and the callback

The event loop would not be like the figure below:

The queue won’t ever look like this based on the scenario described above

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.