Deferring all heavy computation using setTimeout

Question

1. Lets say I have a really heavy piece of computation, it involves two nested for loops goings over an array of size 1000*1000

2. The calculation takes about 1 minute to do.

3. I have a bunch of other stuff going on in the webpage especially user interaction. ( on-click, on-scroll, animation, etc )

4. Now I need to do the 60s calculation at some point. I can for example do:

   setTimeout TwoForLoops,0
   

   this will defer the function call to until all the other on-click,on-scroll,etc events are cleared. however as the calculation takes 1 Minute, the user might trigger some event during that time. do you think if I just do the following I will prevent JavaScript from hanging. Assuming that heavyComputation takes about 0.06 millisecond to computate.

   # _.map is from underscore@ library, basically does a for loop
   # HeavyComputation is a slow function with lots of operations made for my app
   
   NonBlockMap = (x,f)-> setTimeout (->_.map x,f),0
   
   NonBlockHeavyComputation = (x) -> setTimeout (-> HeavyComputation(x)),0
   
   TwoForLoops = (ArrayOfArray) ->
   
      SecondLoop = (element) -> NonBlockHeavyComputation element
   
      FirstLoop = (array) -> NonBlockMap array, SecondLoop
   
   
      return NonBlockMap ArrayOfArray,FirstLoop
   

   This would essentially mean that the maximum javascript will hang for is about 0.06 millisecond but I am not so sure if this will work.

   WhatDo ?

Answer 1

I think your code queues all million HeavyComputation continuables up front, not as it progreses. The event loop will process each one in order before handling new user events, so you've still blocked for a minute.

You should use setImmediate though, or double-check that setTimeout of 0 does not sleep. Nodejs (what I work in; maybe chrome too?) always sleeps 1 ms.

Consider batching the heavy computation nested loop, something like:

function batchedHeavyComputation( elements, iFrom, jFrom, batchSize ) {
    var i, j, numcalls = 0;
    for (i=iFrom; i<1000; i++) {
        for (j=jFrom; j<1000; j++) {
            HeavyComputation(elements[i][j])
            if (++numcalls >= batchSize) {
                setImmediate(function(){
                    var jNext = j < 999 : j+1 : 0;
                    var iNext = j < 999 ? i : i+1;
                    batchedHeavyComputation(elements, iNext, jNext, batchSize);
                });
                return;
            }
        }
    }
}

batchedHeavyComputation(elements, 0, 0, 20);