Javascript Essentials: Asynchronous callbacks

Contents Table

  • Asynchronous definition
  • Event Queue
  • addEvenListener() function

Asynchronous calls

Asynchronous means that the script will send a request to the
 server, and continue it's execution without waiting for the 
reply. As soon as reply is received a browser event is fired, 
which in turn allows the script to execute associated actions.
                                                   ~Stackoverflow

Jargon aside, asynchronous simply means more than one at a time. Hey wait Javascript is synchronous ! So how does it handle asynchronous events? Time to look at the bigger picture. At the time of loading our Javascript code, it’s not limited to our Javascript engine, rather it has associated processes around it. So in totality what is happening just inside the Javascript engine is Synchronous. So the Javascript engine in some sense thus has hooks connected to the other processes around it to implement it’s code. One such instance is given below. Before that if you are not aware of the Lexical environment and global execution context do refer here.

function showme(){
 console.log('finished function');
}
function clickHandler() { 
console.log('You clicked!');
}
//Listen for the click 
document.addEventListener('click',clickHandler);
showme();
console.log('finished execution');

Now lets do a quick run through of the code. The function showme() is given a console.log() statement, as does the line after the function call and event listener, this is to indicate the time of each of the statements run in the console of your developer tools. It seems obvious that the consoled output (if we click somewhere in the page) should be :

finished function
You clicked!
finished execution
    (or)
You clicked!       // If clicked before function gets executed
finished function
finished execution

But the right out put of this “asynchronous call” is :

finished function
finished execution
You clicked!

Let us try to look into what actually happened with the code and the sequence of the events. In the process of looking into it, I’ll take a small detour on what the addEventListener() is, so if you are aware of the latter this would be a much faster read for you.

Event Queue

As mentioned above, the Javascript engine isn’t the only entity when you run your code. So a vague idea of the same can be realized with the help of a list called event queue.asynchronous1.png

When the code is executing through the Javascript engine, function execution contexts and a global execution context is created. As the code is simultaneously running, events outside of the Javascript engine that we want to be notified of inside it are stored in this Event Queue. A repetitive example of the same would be event_listeners for ‘click’ or ‘mouse_scroll’ etc. So now that we acknowledge the fact that the normal execution contexts and this new Event_queue are seperate entities, how would it be accessed? Say if a function had to access a event while the Javascript code is still running.

Remember that Javascript is synchronous, so what happens on the aforementioned function call? In actuality, the events are returned if and only if all the execution contexts are over. The event now processes and checks to see if there is a function to return to and creates a execution context for the same and implements it. So this enables a synchronous programming language to handle asynchronous calls. Now as promised let’s see what the addEventListener is in terms of the argument it takes and what they mean.

Syntax : addEventListener()

document.addEventListener(event, function, useCapture)

The event parameter stands for what event we want to listen in on and accordingly what function to execute once the event has occurred. The third argument is optional as is obvious from our code snippet earlier. It takes either a true (Capturing phase) or false (bubbling phase). It is a safe practice to go with false or bubble phase. Let’s take a over the surface look on what they mean and how it affects the code. This flow tree from Javascript.info is on point.

asynchronous3

 

On enabling True or capturing phase, it’s effect is downward from window to the target phase. While in the case of False or bubbling phase it works it’s way up.

<form onclick="alert('form')"> FORM
  <div onclick="alert('div')"> DIV
    <p onclick="alert('p')">PARA</p>
  </div>
</form>

In the nested structure seen above we expect the form to pop up followed by div etc. But on declaring a False or bubbling phase it works it’s way from inner most element to the top of nested structure.

I guess that is it for now, but hey the learning never stops. Join me again the next time for more interesting stuff, until next time ciao!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s