为什么用setTimeout分割的工作负载仍然冻结浏览器？

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

Unfortunately, JavaScript's setInterval and setTimeout aren't truly asynchronous, so everything will still operate in a single thread. That means that when your setInterval callback is called, it runs in the main thread and blocks execution of everything else.

Here is a great post by John Resig which discusses this in detail: How JavaScript Timers Work .

If you want truly asynchronous JavaScript, you must use something like Web Workers .

---

As others have pointed out here, in your particular case you actually have an infinite loop on this line:

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

Which is causing your code:

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

To never be called. See Guffa's excellent answer for more information.

The rest of my answer still does apply though- if you're trying to do more than simple operations and animating a .gif simultaneously you may still have freezing or stuttering without using something like Web Workers.

Answer 2

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/

Answer 3

I noticed that in your code setInterval is actually never called, because in this line

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

the condition is always true since i is always smaller than i+workload , so it will never get out of the cycle. Good thing that you return from the function inside the loop.