About
In this code snippet, we’ll look at web workers in Javascript.
A web worker is a script that can run in the background separate from the main page javascript. This can be used to prevent blocking code. It could be considered like “multithreading” in javascript … sort of.
Let’s see the example below.
Code:
index.html
Nothing exciting here, this HTML is used just so we can add and run the code.js file for this demo.
<!DOCTYPE html>
<html>
<head>
<title>Web Worker</title>
</head>
<script src="code.js"></script>
<body>
<div>
<h1>Web Worker</h1>
</div>
</body>
</html> code.js
This is our main code file from where we will create the web worker.
//Check if web worker was already created ...
if (typeof(downloadWorker) == "undefined")
downloadWorker = new Worker("downloadWorker.js"); // ... if not create it.
//Register event to receive updates/data from worker.
downloadWorker.onmessage = function(event){
console.log("Download progress: " + event.data + "%");
if(event.data == 100) //If dwonload is complete ...
downloadWorker.terminate(); //... stop and delete the web worker.
}; dwonloadWorker.js
This file will be used to make our web worker.
let progress = 0;
//Start download.
download();
function download(){
//Update progress.
progress++;
//Report progress to main file.
postMessage(progress);
//Simulate download.
if(progress < 100)
setTimeout("download()", 100); //Call this function again in 100ms.
} Resulting output:
