Web Workers 

//Before creating a web worker, check whether the user's browser supports it

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}
<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>
  • Is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page.
  • You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
  • Since web workers are in external files, they do not have access to the following JavaScript objects: the window object, the document object, the parent object.

Create a Web Worker File

//Here, we create a script that counts
//The script is stored in the "demo_workers.js" file

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

The important part of the code above is the postMessage() method - which is used to post a message back to the HTML page.

Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.

Create a Web Worker Object

//the following lines checks if the worker already exists,
//if not - it creates a new web worker object and runs the code in
"demo_workers.js":

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}
//then we can send and receive messages from the web worker

//add an "onmessage" event listener to the web worker.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

Terminate a Web Worker

w.terminate();

When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.

To terminate a web worker, and free browser/computer resources, use the terminate() method.

Reuse the Web Worker

w = undefined;

If you set the worker variable to undefined, after it has been terminated, you can reuse the code.

Related concepts

→
Web Workers
→

Web Workers — Structure map

Clickable & Draggable!

Web Workers — Related pages:

Introduction

Web Workers