Implement program flow - Programming in HTML5 with JavaScript and CSS3 - page 176

Next, add the click event handler to the button:

<script>
…
getDirection();
drawBall();

document.getElementById("intensiveWork").onclick = function () { DoIntensiveWork(); };
…
</script>

Now, users can click a button and get the sum of the squares for a series of sequential
numbers.
The problem with this code is that although the math work is occurring, the ball interac-
tion is blocked completely. The ball stops moving and user input is seemingly ignored until
the math call returns. The call to run the calculations takes too long and interferes. You can
experiment with smaller numbers and see that eventually the number can be small enough so
the work happens fast enough that the ball isn't stopped. This doesn't mean that the applica-
tion is doing work concurrently, although visibly no interruption occurs.

Creating a worker process with the Web Worker API
The Web Worker API is based on the JavaScript messaging framework. This underlying
structure enables your code to send parameters to a worker and have the worker send results
back. A basic web worker is established by creating a separate file to contain the script that
will be processed on the separate thread. The Worker object is available from the global
namespace and is created like so:

var webWorker = new Worker("workercode.js");

This instantiates a new worker process and specifies what file contains the code to be run
on the worker thread. The Worker object supports the functionality described in Table 2-10.

TABLE 2-10 Worker object operations

Method Description

Starts the worker process. This method expects a single parameter containing the
data to pass to the worker thread. If nothing is required in the worker thread, an
empty string can be supplied.

postMessage

Stops the worker process from continuing. terminate

Specifies the function for the worker thread to call back to when complete. This
function accepts a single parameter in the form of EventData with a property named
data containing the values.

onmessage