JavaScript and the Single Threaded Lie

JavaScript is single threaded

Yes, but.. it is also heavily asynchronous. Since my experience porting Node.js to new platforms, it’s turned into one of my go to languages for hacking web apps. Unfortunately I still fall into the async trap.

Let’s look at some code:

And here is the output of the code if we run it:

Now, in this example – it’s pretty clear what is causing the issue. The setTimeout() is doing a delay of 2 seconds. This is an async call, so the for loop has completed it’s entire cycle before any of the callbacks get a chance to run. Timing issues also make things more confusing if things sometimes work since you can’t guarantee the order of asynchronous functions.

The trap for me, is when the code is more complex and it isn’t obvious to see that there is an async call in the way. Also, my brain keeps telling me that for each iteration through the loop, I (think I’m) creating a new variable (item) and that should provide correct isolation for the state.

There are two simple solutions to this problem.

Solution 1 – use the call stack:

Move the async call myFunction into a helper and pass the value to it. This moves it from being a local variable to one on the stack (as a parameter to helper).

Solution 2 – have the callback give the value back:

To be honest, solution 2 is just another call stack approach – but it’s a different enough pattern to be a second solution.

The output of both good solutions looks like:

 

Leave a Reply

Your email address will not be published. Required fields are marked *