JavaScript: Writing your own non-blocking asynchronous functions
Vote for next post or mention what do you want to see next here:
If you are learning or beginner in JavaScript, then I can definitely say that you might have thought,
“How the hell can I write asynchronous non-blocking functions!?”
It is a common question or more like a curiosity when we first look at some built-in node.js modules like file system etc.
Asynchronous execution is one of the advantages of using JavaScript. Because to achieve asynchronous execution in Java, C etc., we need to use Threads and believe me, it is pain in the ____.
But in JavaScript, we don’t have to deal with Threads explicitly! JavaScript is kind enough to take care of it😇.
If you don’t know what is asynchronous… you can read WTF is Synchronous and Asynchronous!
Go on…. I’ll wait here.
Ok. Now that you know what is synchronous and asynchronous execution, lets get into the JavaScript!
Synchronous Functions:
In the synchronous case, each statement completes before the next statement is run. In this case the program is evaluated exactly in order of the statements.
It prints:
started357......completed 1228finished
Single-Threading:
JavaScript is a single-threaded environment! Even the node.js
In a single-threaded environment, only one section of code can be running at any one time.
Consider the following example:
Even though both event handlers run on the click event, the second handler won’t run until you’ve provided your name to the prompt and the first handler has completed.
Moreover, the browser won’t respond to any events whatsoever while it completes the first handler. After all, Javes(👮🏻♂️) can’t answer the phone while he’s opening the door.
Tasks like these that occupy Javes’ full attention are called blocking or synchronous.
Asynchronous Functions
Synchronous functions are generally not a big problem because we have fast computers, and most event handlers are executed instantly.
But what happens when you need more time though? For example, you might need to query third-party servers for data, or make API calls. In other words, send Javes to the post office to post a telegram and get a reply.
Having the browser lock up while we wait for a call to finish would be like having Javes wait at the post office for the reply to every telegram he sends. We can’t very well have that, after all he’s got work to do!
This is where asynchronous functions come in: whereas a synchronous task will occupy Javes continuously until its completion, an asynchronous task can be initiated and then put aside until a later date while our valet gets started on the next task on his to-do list.
You can think of it as Javes asking the post office to call him back when the reply arrives, at which point Javes can stroll back down there and get the mail.
We use setTimeout( function(){} , 0 ); to create asynchronous functions in JavaScript!
It prints:
startedfinished357......completed 1228
The Event Loop
So how does Javes keep track of which task to work on next? In JavaScript, Javes’ to-do list is called the event loop.
There’s just one problem: Javes can only handle one task at a time, so how will he answer the post office’s phone call if he’s already busy polishing the silverware?
There’s no two ways around it: we’ll need to hire a secretary to help manage Javes’ to-do list and keep it up to date as new tasks appear.
In turns out that this is exactly what happens with JavaScript, too: the JavaScript engine actually sports an additional background thread which takes care of managing the event loop.
Still, your own code will always run in a single main thread. So from the perspective of the programmer, it’s safe to say that JavaScript is single-threaded.
Got any doubts/questions/suggestions? Comment down below.
