Callbacks the very essence of asynchronous JavaScript programming

Introduction

In earlier days of programming every thing was sequential when one operation needed to wait for the others above it to finish. In situation like those of some priority task had to be done then it had to wait for a long to execute the next. So Callbacks and asynchronous programming are the new market introductions.

Description

Callbacks can be in simpler term visualized as a reminder to the Event loop that this has to be executed after a specific interval. As a result after the interval is reached the callbacks get executed on the highest priority basis (But still there’s some limitation which you’ll get to know reading further).

These call backs can be of two types:

–  Blocking callbacks (also known as synchronous callbacks or just callbacks)
–  Deferred callbacks (also known as asynchronous callbacks)

Lets look at it through an example. We will mainly go through with deferred Callbacks( asynchronous ) with example.

<html>
<head>
<script type="text/javascript">
	function myCallBack(callback) {
		alert("inside the asynchronous method");
		setTimeout( function(){
			alert("inside asynchronously executed code. Next step to call back.");
			callback();
	   }, 5000);
}
function callbackTest(){
 	myCallBack(function() {
		 alert("Finished the call back after 5+ seconds.");
 	})
}
</script>
</head>
<body onLoad="callbackTest()">
</body>
</html>

This Code piece demonstrates an asynchronous operation. Where the alert alert(“Finished the call back after 5+ seconds.”); is executed after 5 seconds when the asynchronous operation is completed.

Lets Go through what happens Internally

The SetTimeOut function is added to the Events queue. Providing the Interval 5000 specifies that the function passed with the event has to executed after 5 seconds from the current time, i.e.: the time of addition of the event.

But this method does not guarantee that the event will be executed just after 5 seconds. if some other tasks are running and they need to complete first then the event setTimeOut might get delayed until the other tasks are finished(Limitation of JavaScript). Since java script is essentially single threaded so the concept of multi-threading does not come into the picture unless and until tasks like downloading a file or receiving a response from a service is involved.

So what is asynchronous JavaScript then all about. Simply Deferred (Delayed) callbacks(Call to events in Queue) with some priority.

Summary

A very interesting property of the event loop model is that JavaScript, unlike a lot of other languages, never blocks. Handling I/O is typically performed via events and callbacks, so when the application is waiting for a DB query to return or an XHR response to return, it can still process other things like user input etc. But the final result of the event can only be processed once the task that is currently executing (say a for loop looping over 1000 times) gets finished as the process cannot be broken in between.

Written By: Anobik Dey, Mobile Application Developer at Mindfire Solutions

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