Question: I'm having a problem that I can't solve. I have a loop in javascript where the condition variable to stop depends on a global variable. The loop starts looping and when I change the value of that global variable it never stops.

```
stop = false;
var i = 0;
while ((stop == false) && (i<100000)){
    console.log("hi-"+i);
    i++;
}

```

While loop is running, if I do stop = true, it never stops. I do not know why is that.

Any idea?

Thanks!

Answer: 
JavaScript is inherently single threaded. Once a block of code has started running, it will run to completion before anything else happens. IE the event where you're setting `stop` to `true` will not execute until after the while loop has finished.

You need to split your loop into sections and run each section individually, allowing other events to take place:

```
stop = false;
var i = 0;

function loopLogic() {
  var tempStop = i + 500;
  while (i < tempStop) {
    //original processing logic
    console.log("hi-" + i);
    i++;
  }

  if (!stop && i < 100000)
    window.setTimeout(loopLogic, 0);

}
window.setTimeout(loopLogic, 0);

```

This breaks up the function into multiple chunks of 500 at a time. The `setTimeout` of 0 duration lets the function continue (almost) immediately, but will put the next chunk at the bottom of the execution chain. This allows other events to happen and therefore will allow updating of `stop` to `true`

[Here's a fiddle](http://jsfiddle.net/98y294m7/1/) showing this approach.

The other approach available in compliant browsers is the [Web Worker](http://en.wikipedia.org/wiki/Web_worker), but that's starting to get beyond the scope of this question.
It sounds like you were expecting JS to be multithreaded, but it is not, which makes certain things awesome. For example, if JS were multithreaded, what would the following do?

```
if (x === 3) {
    alert(x);
}

```

The answer in JS is "it alerts 3," but if JS were multithreaded, there would be nothing stopping another thread from editing x between the if and the alert, so it wouldn't be well-defined.

You can return control to the browser's event loop while making sure that some code will run, by **scheduling** that function, either with `setTimeout` or `setInterval`. This also lets you do *recursion* without a massive call stack, if you're willing for the result of that recursion to be asynchronous. Furthermore JS is getting a new feature (generators and the `yield` keyword) which will make it easier to "pause" a function somewhere in the middle only to resume it later.

The simplest way to do what you're trying to do is:

```
var i = 0, running = true;
function iter() {
    if (running && i < 100000) {
        console.log("hi", i++);
        setTimeout(iter, 0);
    }
}
iter();

```

You can also use a non-zero time in the setTimeout call -- e.g. the human reaction time is something like 200ms so if you just need it to seem continuous from a human perspective, change the `0` to `100`; it'll give your computer a little more space to breathe.

You can also use `setInterval` but just be aware that if some CPU-intensive function blocks other execution for a while, you'll queue up a bunch of the same function that all want to execute one after another. When a setTimeout thread calls setTimeout, there is a *minimum delay* which is enforced by setTimeout; this is not the case with setInterval (which claims instead that the average time between calls is consistent, but makes no claims about the minimum or maximum delays between them). 

For the sake of `setInterval` you will probably want to stop the interval after some point. Adding the `if` check on `i` of course makes the function an empty function which does nothing, so it doesn't waste *much* time, but if you want to unschedule it, capture the result of `setInterval` and pass it to `clearInterval`.