Execute Background Task In Javascript

Question

I have a cpu intensive task that I need to run on the client. Ideally, I'd like to be able to invoke the function and trigger progress events using jquery so I can update the UI.

I know javascript does not support threading, but I've seen a few promising articles trying to mimic threading using setTimeout.

What is the best approach to use for this? Thanks.

Answer 1

Basically, what you want to do is to divide the operation into pieces. So say you have 10 000 items you want to process, store them in a list and then process a small number of them with a small delay between each call. Here's a simple structure you could use:

function performTask(items, numToProcess, processItem) {     var pos = 0;     // This is run once for every numToProcess items.     function iteration() {         // Calculate last position.         var j = Math.min(pos + numToProcess, items.length);         // Start at current position and loop to last position.         for (var i = pos; i < j; i++) {             processItem(items, i);         }         // Increment current position.         pos += numToProcess;         // Only continue if there are more items to process.         if (pos < items.length)             setTimeout(iteration, 10); // Wait 10 ms to let the UI update.     }     iteration(); }  performTask(     // A set of items.     ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o'],     // Process two items every iteration.     2,     // Function that will do stuff to the items. Called once for every item. Gets     // the array with items and the index of the current item (to prevent copying     // values around which is unnecessary.)     function (items, index) {         // Do stuff with items[index]         // This could also be inline in iteration for better performance.     }); 

Also note that Google Gears has support to do work on a separate thread. Firefox 3.5 also introduced its own workers that do the same thing (although they follow the W3 standard, while Google Gears uses its own methods.)

Answer 2

I had a similar problem to solve recently where i needed to keep my UI thread free while crunching some data to display.

I wrote a library Background.js to handle a few scenarios: a sequential background queue (based on the WorkerQueue library), a list of jobs where each is called on every timer, and an array iterator to help break up your work into smaller chunks. Examples and code here: https://github.com/kmalakoff/background

Enjoy!