JavaScript Threading - Part 2 (Worker)

December 18, 2012 by Christoff Truter JavaScript   Threading  

In the second part of this series we're going to have a look at web workers.

Unlike timers a worker runs in an isolated thread, which allows us to run intensive tasks without blocking the UI/parent thread. This functionality is currently supported by organizations that care about developing real browsers (but will however be supported by Internet Explorer 10).

Note in chrome workers can't run locally (requires a webserver), unless you open chrome with the
--allow-file-access-from-files switch.

Lets have a basic look at how all of this works.

Observe the following snippet:

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

worker.addEventListener('message', function(e) {
	alert(; // Data received from client/worker thread
}, false);

worker.addEventListener('error', function(e) {
	alert(e.message); // something went wrong
}, false);

worker.postMessage('Hello Mars'); // Sending data to the worker thread

Firstly we need to create / instantiate a new worker object, you will notice that I passed a filename to its "constructor" - it points to the file / source code that's going to be executed within our worker thread. It is also possible to pass source code to it in the form of a blob url)

Notice that I attached a callback to the worker object's message event, this becomes necessary since the worker thread can't access objects living in the UI thread directly (thanks to thread-safety).

So you'll need to send messages between your threads, like seen on the last line of snippet 1 in which we send a message from our UI thread to our child/worker thread.

I also attached a callback to the worker's error event - allowing us to handle possible exceptions gracefully.

In the following snippet you can basically see what the file handling the worker thread will look like.


self.addEventListener('message', function(e) {
	// do some vicious work
	self.postMessage("From Thread - " +; // post a message back to the parent thread
}, false);

Similarly to the first snippet, we need to attach a handler to the message event (to receive messages from the parent thread) and use the postMessage function to send results back to its parent thread.

Note like previously stated that you will not be able to access objects living in your parent thread, e.g document, window objects, you will however have access to a subset of its functions, like timer functions, XMLHttpRequest (ajax) and others.

You will also notice the function importScripts - like the name suggests it allows you to include external scripts within your js file.

Now all of this will only work within the page that created the worker, but awesomely enough its also possible to create a worker that can be shared among your pages - which will be the topic of the next part.

Leave a Comment

Related Posts

JavaScript Threading - Part 1 (Timers)

December 18, 2012

Latest Posts

Getting my hands dirty with TypeScript

February 17, 2015

Quick and dirty look at TypeScript

January 29, 2015

My personal life in review

January 21, 2015

Quick rundown of possible new C# 6.0 features (perhaps, maybe - I think)

January 19, 2015

Proof of Concept - JavaScript Mediator Framework

January 13, 2015

JavaScript Tip - Benchmarking

January 7, 2015

Google's new and improved reCAPTCHA - simple PHP implementation

January 5, 2015

NASA missions to follow in 2015

January 3, 2015

Online content censorship - South Africa

January 2, 2015

Enhance Customer Registration Process with Cutting-Edge Solutions from Card Scanning Solutions Inc.

November 4, 2013

Most Commented on Posts

Moving items between listboxes in example

Move items between two listboxes in, VB.NET) and PHP
June 12, 2008

Simple WYSIWYG Editor

Creating a WYSIWYG textbox for your website is actually quite simple.
February 1, 2007

C# YouTube : Google API

Post on how to integrate with YouTube using the Google Data API
March 12, 2011

Populate a TreeView Control C#

Populate a TreeView control in a windows application.
August 27, 2009

Cross Browser Issues: Firefox Word Wrapping

Firefox word wrapping issues
June 9, 2008

Angular   ASP.NET   Astronomy   C#   C++   Coding Horrors   Comedy   Cross Browser   Design Patterns   Google API   IIS   Integration   JavaScript   Love and War   Microsoft Office   Personal   PHP   South Africa   SQL   Threading   TypeScript   Visual Basic   XML