Teshtek Teshtek - 1 month ago 14
HTML Question

JS - How Web Workers work?

I'm working on this code :

JS

<script src='file://C:\blablabla\JavaScript\bignumber.js-master\bignumber.js'></script>
<script>
document.write("<h1>\"blabla\"</h1>\n<h3>blabla</h3>");

function problem(){
var img = document.getElementById('problemi');
return img.style.display = img.style.display === 'block' ? 'none' : 'block';
}

function problem551(){
problem();
var t0 = performance.now();
var max = 1e+15;
var sum = new BigNumber(1);
for(var i=1;i<max;i++)
sum = sum.plus(scomponi(sum,0));
var t1 = performance.now();
document.getElementById("p551").innerHTML = 'blabla<span>'+max+"</span> blabla <span>" + sum +"</span> in <span>"+(t1 - t0)/1000+"</span> blaaa";

}

function scomponi(num,sum){
var str=num.toString();
for(var i = 0 ; i< str.length ;i++ ){
sum += parseInt(str[i]);
}
return sum;
}


</script>


HTML

<body>
<div>
<button onclick="problem551()" >PROBLEM 551</button>
<img id="problemi" src="PROBLEM551.png" style="display: none;">
<p id="p551"></p>
</div>
</body>


But Chrome crashes, it gives me this :

error

How can prevent this error on my function, he has a loop from 1 to 1e+15, so it takes too much time. I read something about WEB WORKERS but is unclared for me. I want to use it on my function problem551(), so someone can explain me how it works?

Answer

Move your functions to a new file, funcs.js:

And use new Worker("funcs.js") to start it.

You can use postMessage to send the result back as described in MDN:

Sending messages to and from a dedicated worker

The magic of workers happens via the postMessage() method and the onmessage event handler. When you want to send a message to the worker, you post messages to it like this (main.js):

first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

So here we have two elements represented by the variables first and second; when the value of either is changed, myWorker.postMessage([first.value,second.value]) is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message.

In the worker, we can respond when the message is received by writing an event handler block like this (worker.js):

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

Do expect it to still take a lot of time, it is quite a long operation, but it will hopefully prevent Chrome from bringing up the error.


I see you are trying to solve Project Euler problem 551.

You are throwing away a valuable piece of information:

You are given a_10^6 = 31054319.

You don't need to begin your iterations from 1. The next number can any arbitary number in the sequence.

a_10^6 = 31054319

a_(10^6 + 1) = 31054319 + 3 + 1 + 0 + 5 + 4 + 3 + 1 + 9
Comments