Making Blocking Functions Non-blocking in JavaScript
--
In JavaScript, developers often have the design goal of writing their code in a non-blocking fashion. This is a result of the constraint that JavaScript runtimes are singly-threaded, meaning they can only perform one JavaScript task at a time. So if a function goes into a while loop, everything else that goes on in JS is forced to wait. This has negative impacts on the user experience (imagine the spinning wheel of death in your browser) — and also causes NodeJS servers to have slow response time. However, there are times where it seems that a function would be ideal to write as a while loop. What do we do in those cases?
In Search For a Solution
In order to see what could solve this issue, we must realize where the problem exists. In a simple while loop, the engine evaluates a condition, and if true executes a block of code, then does this process until the condition evaluates to false.
The problem with doing this is also the inherit benefit — and likely the reason that you, the developer, chose to use a while loop in this function: a while loop runs for a non-fixed amount of time. An amount of time that is entirely dependent on the values associated with the condition and the block of code in the loop. This causes all of the queued up events (requests, button presses, etc.) to have to wait, making the user think your web app is slow and crappy.
The Solution To This
In order to stick with the original design strategy of our function, we’re going to have to change the way we write our code; we’re going to have to play with the JS Engine, as opposed to fighting with it. Let’s make a checklist of what we want:
- We need to check a condition.
- If that condition is true, we should run the specified block of code.
- Repeat the cycle, until the condition is not true, then continue with the rest of the function.
What Our Code Currently Looks Like
Where To Go From Here
In order to play along with JavaScript’s asynchronous, non-blocking coding constraints, we should start by wrapping up each of these steps into their own functions, and embrace callbacks.
This usage of closures and callbacks brings out the best in what JavaScript offers. What essentially has been done here is we have written the overarching function in a way that it will run — even when we make it non-blocking, in the correct order of execution as specified earlier in the post.
Now To Make The While Loop Non-Blocking
This is probably the most interesting part of this process: we are going to take a block of code that could potentially block up the whole system, and make it play fairly with the rest of the executing code (by not hogging up the single thread).
We do this by breaking up the code block inside the while loop into its own immediately invoked function. Then, we take the code block and wrap it up again with an if-else, as seen below. If the condition is true, the original code block runs, and then, crucially, the code block’s function is called recursively. Each time the function runs, it will check that condition. But each time the function is recursively called, other queued up requests and button presses can be run on JavaScript’s single-threaded runtime before the code block’s function runs again.
This allows the user to have a great, speedy UI. And for NodeJS server requests to respond to other requests quicker. And once the condition fails, in the else section we call the afterWhileLoop callback.
Hopefully, this generalized tutorial has helped you break down exactly how to make blocking actions non-blocking. There are cleaner ways to write it, especially using Immediately Invoking Functions (see below), but I want it to be very clear to help make it easy to understand.
As we can see, it’s an increase from about 10 lines originally, to now 20 lines, but your users and clients will love you for it!
Thanks for reading my post,
Happy Hacking!
-Max Dignan — https://twitter.com/maxdignan
