Javascript as Multi Threading Programming Language.

We all Know Javascript is a single threaded programming language and when it comes to concurrency in javascript then we got a powerful event loop mechanism along with Javascript engine that handles all of our asynchronus tasks. But still it is not running multiple thread...

Can we achieve multi threading in javascript ?

Ans is yes

How ?

Ok we have got something with newer version of javascript named worker.

So thread word can be replace with worker thats it.

lets see example of running a very very slow function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript as Multi Threaded</title>
</head>
<body>


    <button id="btn">log Something</button>
    <button id="slowFunc">Start slow function</button>

    <script src="index.js"></script>
    
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript as Multi Threaded</title>
</head>
<body>


    <button id="btn">log Something</button>
    <button id="slowFunc">Start slow function</button>

    <script src="index.js"></script>
    
    
</body>
</html>

Above is our html and it contain a script

const logBtn = document.getElementById("btn");
const slowFnBtn = document.getElementById("slowFunc");


logBtn.addEventListener('click', function(e){
    console.log('logging information..!');
});

slowFnBtn.addEventListener('click', function(e){
    let sum = 0;
    for(let i=0; i < 1000000000; i++){
        sum += i;
    }
    console.log('finaly completed task');
});

const logBtn = document.getElementById("btn");
const slowFnBtn = document.getElementById("slowFunc");


logBtn.addEventListener('click', function(e){
    console.log('logging information..!');
});

slowFnBtn.addEventListener('click', function(e){
    let sum = 0;
    for(let i=0; i < 1000000000; i++){
        sum += i;
    }
    console.log('finaly completed task');
});

Above is normal event function and a very very slow event function

so when you click on slowFunc button your browser will be freeze till the time execution completes and you have to wait to perform any activity until it becomes normal.

Now lets run our slowFunc task in a separate thread and thats called worker in javascript.

const logBtn = document.getElementById("btn");
const slowFnBtn = document.getElementById("slowFunc");


logBtn.addEventListener('click', function(e){
    console.log('logging information..!');
});

slowFnBtn.addEventListener('click', function(e){
    const worker = new Worker('worker.js');
    worker.postMessage('message');
});

const logBtn = document.getElementById("btn");
const slowFnBtn = document.getElementById("slowFunc");


logBtn.addEventListener('click', function(e){
    console.log('logging information..!');
});

slowFnBtn.addEventListener('click', function(e){
    const worker = new Worker('worker.js');
    worker.postMessage('message');
});

Now lets create our worker file as well

onmessage = function(){
    let sum = 0;
    for(let i=0; i < 1000000000; i++){
        sum += i;
    }
    console.log('finaly completed task');
}

onmessage = function(){
    let sum = 0;
    for(let i=0; i < 1000000000; i++){
        sum += i;
    }
    console.log('finaly completed task');
}

This is an example of dedicated worker in which on click of slowFunc button a worker constructor funtion gets called and load worker.js file and use a postMessage method to notify the worker file about the execution of task and your task will run in separate thread and you can perform any activity as no function is blocking you to do anything.

Hopefully this article is understandable to you

In next we will be discussing shared thread.

Thanks

Rizwan Khan

India

Coding is an art and I love art

Explore more similar Post

0 Comments