A Web Work Example

Create a new web application. Add an index.html page, a Scripts folder named Scripts and two JavaScript files inside it. Name one main.js and the other myWorker.js. 

Inside the index page, add a script reference to the latest version of jQuery at the top and a reference to scripts/main.js at the bottom before the closing </body> tag. 

Next, add an input button to test our functionality. 




<input type=button id="testWorkers" value="Test Workers" />

Finally, inside main.js, add the following code to handle document.ready and to create a simple object to contain our test code.

Start Code main.js

$(document).ready(function () {
   workerTest.init();                                                                             //#Comment A
});
window.workerTest = {
   myWorker: null,
   init: function () {
      self = this;
      self.myWorker = new
Worker("/Scripts/myWorker.js");                                                         //#Cooment B
      $("#testWorkers").live("click", 
         function () {
            self.myWorker.postMessage("Test");                                       //#Comment C
         }
      );
      self.myWorker.addEventListener("message",
         function (event) {
            alert(event.data);                                                                    //#Comment D
         }, 
      false);
   }
};

End Code main.js

Following the comment to code main.js

#Comment A -> Initializes our object using the regular jQuery ready function.

#Comment B -> Creates a new worker object and assign it as a local variable.

#Comment C -> Sends the worker a message whenever the test button is clicked.

#Comment D -> When the worker sends a message back to the host, notify the user.

In the worker object, we will show that the JavaScript begins executing as soon as the script is loaded and that it can begin immediately sending messages and responding to posts.

StartCode myWorker.js

count = 0;                                                                                         //#Comment A
init = function () {
   self.count++;                                                                                  //#Comment B
   self.postMessage("start count: " + count);                                       //#Comment C
}
self.addEventListener("message", function (event) {
   self.count++;                                                                                  //#Comment D
   setTimeout(function () {
      self.postMessage("Last Msg: " + event.data +  
         ", count: " + count);                                                                   //#Comment E
   }, 1000);
}, false);                                                                                           
init();                                                                                                 //#Comment F

End Code myWorker.js

Following the comment to code myWorker.js                                                                        

#Comment A Since we do not have access to window, we cannot assign variables to it by default. Variables here are scoped to the script file.

#Comment B Here, we update the count value to show that work has been done.

#Comment C Upon initialization, we can call the postMessage event proving that messages can be sent not in response to any host request.

#Comment D Update the count variable whenever a message is received.

#Comment E When a message is received, wait one second and respond with the message

sent and the current count value.

#Comment F At the end of the script, we call the init function to start performing work.

While the browser can certainly access the host system’s memory and processor resources, doing any heavy processing will often cause the screen to hang for a few moments. You may even encounter a browser message stating that it thinks you have a runaway process. The Web Worker specification solves this problem by allowing you to create a background worker that can do work on a different thread, thus freeing up the user interface thread to perform screen reflows and other more interactive logic.