Question

http://jsfiddle.net/Codemonkey/ye5qv/2/

I am experimenting with writing large workloads to recur using setInterval so that the browser can catch it’s breath between each iteration of work. In my example above I’m giving the browser 100ms of rest between each interval of fibonacci calculations, but the browser is still frozen from the moment fib() is called to the moment the callback is called. Note: In my example, the fibo function isn’t called before one second after the document load so you can clearly see it freeze for a few seconds

Exactly why isn’t this method working, and how can I make it work? Alternatively, which other method could achieve the same goal result? To reiterate, the goal of using setInterval to split up the work is that the browser should never freeze or studder during the process.

I’m using chrome and I’m mainly concerned with the V8 engine, but an x-browser compatible solution is a bonus

Answer 1

The problem is that your code never reaches the point where it calls setTimeout to give control back to the browser.

Change this:

for(var i = start; i < i+workload; i++)

to:

for(var i = start; i < start+workload; i++)

As workload is a positive number, i < i + workload will never be false, so you have an infinite loop.

---

You don’t have to wait for 100 ms when giving control back to the browser, just calling setTimout is enough to make the browser handle events, so you can use the time 0:

setTimeout(function() {
  processor(start + workload);
}, 0);

Demo: http://jsfiddle.net/Guffa/ye5qv/3/