HTML and CSS Reference
In-Depth Information
canvas while your app searches for prime numbers? Perhaps a
strange use case, but we have workers to come to your rescue.
The main document will handle starting the worker and drawing
on the canvas. The only code that's offloaded to the worker is
the prime number searching.
var worker = new Worker('prime.js'),
prime = document.getElementById('prime');
worker.onmessage = function(event) {
prime.innerHTML =;
The page continues to handle mousedown , mousemove , and mouseup
events to draw on a canvas on the page. Inside the prime.js
script we have:
onmessage = function (event) {
// doesn't matter what the message is, just start the job
function run() {
var n = 1;
search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// found a prime!
When the prime.js worker receives any message, it starts the
prime number search. When you run this prime number drawing
extravaganza of an application, everything runs smoothly, and
you're able to create your perfect work of art whilst also search-
ing for primes as seen in Figure 10.2 .
Search WWH ::

Custom Search