Question

I would like to thread some Javascript code while both the main process and thread are free to update the browser UI.

For example:

function StartStuff() {
    StartThreadedCode();
    // do more work and update the UI while StartThreadedCode() does its work
}

function StartThreadedCode() {
    // do stuff (do work and update the UI)
}

Is it possible?

Answer 1

There are two main ways to achieve “multithreading” in Javascript. The first way is a cross-browser solution, that would also work in older browsers, but is more complicated to implement.

The idea behind it is that you give the UI some time to update every once in awhile. Since there’s no synchronous sleep function in Javascript, the only way to achieve this is to use setTimeout (or setInterval with a little bit more complicate logic) to delay the execution of every loop of your complex calculations. This would give the browser some time to update the UI between loops, giving the visual effect of multiple things happening simultaneously. A few ms should be more than enough for the UI to reflect the latest changes.

It has it’s drawbacks of course, and can be quite difficult to implement if there are multiple actions the user might want to do while the background calculations are being performed. Also it can drastically slow down the whole background calculation, since it’s delayed a few ms now and then. In specific cases, however, it does the trick and performs well.

The second option would be to use web workers, that are basically Javascript scripts running independently in the background, like a thread. It’s much easier to implement, you only have to worry about messaging between main code and background workers, so your whole application isn’t affected as much. You can read about using them from the link posted by Mic https://developer.mozilla.org/en/Using_web_workers. The greatest drawback of web workers is their support by browsers, which you can see at http://caniuse.com/#search=worker There’s no possible workaround for IE <9 or mobile browsers that truly simulate the effect, so there’s not much you can do about those browsers, but then again, the benefits of modern browsers might outweigh poor IE support. This, of course, depends on your application.

Edit: Im not sure whether I explained the first concept clearly enough, so I decided to add a small example. The following code is functionally equivalent to:

for (var counter = 0; counter < 10; counter++) {
  console.log(counter);
}

But instead of logging 0-9 in quick succession, it delays 1s before executing the next iteration of the loop.

var counter = 0;

// A single iteration of your calculation function
// log the current value of counter as an example
// then wait before doing the next iteration
function printCounter() {
  console.log(counter);
  counter++;
  if (counter < 10)
    setTimeout(printCounter, 1000);
}

// Start the loop
printCounter();