Question

I’d like to be able to dispatch a bunch of work via JavaScript to be done in the browser in such a way that the browser stays responsive throughout.

The approach I’m trying to take is to chunk up the work, passing each chunk to a function that is then queued with a setTimeout(func, 0) call.

I need to know when all the work is done, so I’m storing the returned timer ID in a map (id -> true|false). This mapping is set to false in the next block of code after I have the timer ID, and the queued function sets the mapping to true when it completes… except, of course, the queued function doesn’t know its timer ID.

Maybe there’s a better/easier way… or some advice on how I can manipulate my map as I need to?

Answer 1

I would queue the work in an array, use one timeout to process the queue and call a callback once the queue is empty. Something like:

var work = [...];

var run = function(work, callback) {
    setTimeout(function() {
        if(work.length > 0) {
            process(work.shift());
            setTimeout(arguments.callee, 25);
        }
        else {
            callback();
        }
    }, 25);
};

run(work, function() {
    alert('Work is done!');
});

As JavaScript in browsers is single threaded there is no real advantage to run multiple timeouts (at least I think this is what you are doing). It may even slow down the browser.