Why can't Web Worker call a function directly?

Question

We can use the web worker in HTML5 like this:

var worker = new Worker(\'worker.js\');

but why can\'t we call a function like this?

Answer 1

WebWorkers Essentials

WebWorkers are executed in an independent thread, so have no access to the main thread, where you declare them (and viceversa). The resulting scope is isolated, and restricted. That's why, you can't , for example, reach the DOM from inside the worker.

---

Communication with WebWorkers

Because communication betwen threads is neccessary, there are mechanisms to accomplish it. The standard communication mechanism is through messages, using the worker.postMessage() function and the worker.onMessage(), event handler.

More advanced techniques are available, involving sharedArrayBuffers, but is not my objective to cover them. If you are interested in them, read here.

---

Threaded Functions

That's what the standard brings us. However, ES6 provides us enough tools, to implement an on-demmand callable Threaded-Function.

Since you can build a Worker from a Blob, and your Function can be converted into it (using URL.createObjectURL), you only need to implement some kind of Communication Layer in both threads, to handle the messages for you, and obtain a natural interaction.

Promises of course, are your friend, considering that everything will happen asynchronously.

Applying this theory, you can implement easilly, the scenario you describe.

---

My personal approach : ParallelFunction

I've recently implemented and publised a tiny library wich does exactly what you describe. in less than 2KB (minified).

It's called ParallelFunction, and it's available in github, npm , and a couple of CDNs.

As you can see, it totally matches your request:

// Your function...
let calculatePi = new ParallelFunction( function(n){
    // n determines the precision , and in consequence 
    // the computing time to complete      
    var v = 0;
    for(let i=1; i<=n; i+=4) v += ( 1/i ) - ( 1/(i+2) );
    return 4*v;
});

// Your async call...
calculatePi(1000000).then( r=> console.log(r) );

// if you are inside an async function you can use await...
( async function(){    
    let result = await calculatePi(1000000);
    console.log( result );
})()

// once you are done with it...
calculatePi.destroy();

After initialization, you can call your function as many times you need. a Promise will be returned, wich will resolve, when your function finishes execution.

By the way, many other Libraries exists.