Synchronous Blocking JavaScript: Problems and Its Solutions(Asynchrous Non-Blocking Way)
JavaScript is a single threaded language. Which means it performs one operation at a time. When it performs an action it does not perform another action unless it finishes it. The behavior is called synchronous blocking behavior.
So, synchronous because one task at a time and blocking because of does not perform another action while performing an action.
Blocking Code
Let’s look at the following code,
function wait(){
console.log(“Started”)
var currentTime=new Date().getTime()
while(currentTime + 3000 >= new Date().getTime() );
console.log(“Done”)
}
console.log(“Start”)
wait()
console.log(“Stop”)
The output is,
Start
Started
Done
Stop
Now let’s describe the code,
First, the console.log(“Start”) line gets executed. Then it calls the wait() function. Inside wait(), first console.log(“Started”) and var currentTime=new Date().getTime() get executed.
Then comes while(currentTime + 3000 >= new Date().getTime() );. As, JavaScript measures time in miliseconds so 3000 means 3000 miliseconds/ 3 seconds. Within this time, no code gets executed.
This is the blocking feature of JavaScript, where the code get stuck until it finishes an operation.
The rest of the code gets executed normally.
Behind the Scenes
JavaScript code gets executed inside call stack. JavaScript is execution is started with a main() function. After that all the calls/functions get executed.
First, console.log(“Start”) — enters in the call stack and gets executed.
Then, wait() enters the call stack. Inside wait() the console.log(“Started”) get inserted in the call stack and get executed.
When, while(currentTime + 3000 >= new Date().getTime() ) gets executed, it stops all the browser activity for 3 seconds. You can’t even click to the browser.
This is what happens executing blocking code.
After that console.log(“Done”) and console.log(“Stop”) will be executed normally.
Oh! by the way, after execution of every call the call is removed from the stack.
When the main() function is executed, the code execution finishes. main() function just runs the JavaScript code, nothing else.
The main() function is the last method of the call stack. When the call stack is empty the program ends.
Solving Blocking Problem (Asynchronous Programming)
We can use setTimeout() method to solve blocking problem. Basically, setTimeout() takes a callback and a timeout as parameters. The timeout parameter creates a timeout(wait) and after the timeout it runs the callback. Timeout makes a callback function/ response of a function waited.
function wait(){
console.log(“Started”)
setTimeout(()=>{
console.log(“done”)
}, 3000)
console.log(“Done”)
}
console.log(“Start”)
wait()
console.log(“Stop”)
The output is,
Start
Started
Stop
done
In this piece of code we used the setTimeout() method which waits for 3 seconds to send the callback.
How It Works
The code works normally like before until it reaches the setTimeout() method. When the call stack sees setTimeout() it sends it to “Web Api” which holds all the asynchronous methods. Regardless of the timeout, the call stack will execute the rest of the code. After the call stack becomes empty, the program should end. But it does not. Know why.
Because after the call stack is empty it looks at the web api whether there is something left to execute. As there is a setTimeout waiting, it then enters into the callback queue. It occurs after the waiting time finishes. In the mentioned code it will be 3 seconds.
If there is multiple setTimeouts then, the methods having the lower timeout value will enter the callback queue earlier.
After entering the callbacks to queue, event loop starts working. As queue works in first in first out policy, the first callback which is entered to queue will go to the call stack and get executed. This process is handled by the event loop.
So, that’s it. That’ the basic idea about blocking code and how to fix it. This is a very important part of JavaScript and according to me it’s the backbone of Node.js.