javascript - Why isn't setTimeout cancelling my loop?

Question

I wondered how many times can a JavaScript while statement (in Chrome's console) can increment a variable in a millisecond, so I quickly wrote this snippet directly into console:

var run = true, i = 0;
setTimeout(function(){ run = false; }, 1);
while(run){ i++; }

The problem is that it runs forever.
Why is this happening, and how can I solve it?

Answer 1

This comes back to the one-threaded nature of JavaScript¹. What happens is pretty much this:

1. Your variables are assigned.
2. You schedule a function, to set run = false. This is scheduled to be run after the current function is run (or whatever else is currently active).
3. You have your endless loop and stay inside the current function.
4. After your endless loop (never), the setTimeout() callback will be executed and run=false.

As you can see, a setTimeout() approach wont work here. You might work around that by checking the time in the while condition, but this will tamper with your actual measurement.

¹ At least for more practical purposes you can see it as single-threaded. Actually there is an so called "event-loop". In that loop all functions get queued until they are executed. If you queue up a new function, it is put at the respective position inside that queue. After the current function has finished, the engine takes the next function from the queue (with respect to timings as introduced, e.g., by setTimeout() and executes it.
As a result at every point in time just one function is executed, thus making the execution pretty much single threaded. There are some exceptions for events, which are discussed in the link below.

---

For reference:

• https://stackoverflow.com/a/16757582/1169798

  Here a similar scenario was explained in more detail

• https://stackoverflow.com/a/2734311/1169798

  A more in-depth description on when JS can be seen as single-threaded and when not.