Javascript Lezione 72

//worker.js
addEventListener('message', (parametroDalMainScript) => {
  console.log('webworker partito');
  console.log(`Ricevuto valore dal main: ${parametroDalMainScript.data}`);
  const generati = generatePrimi(parametroDalMainScript.data);

  console.log('Restituisco i numeri primi al main');
  postMessage(generati);
});

function generatePrimi(quota) {
  let generati = [];
  let cont=0;

  console.log(`Generazione partita, obiettivo ${quota} numeri ...`);
  console.log(`Dimensione iniziale array ${generati.length} numeri ...`);

  const MAX_PRIME = 1000000;
  const random = (max) => Math.floor(Math.random() * max);

  const isPrime = function (n){
    for (let i = 2; i <= Math.sqrt(n); i++) {
      if (n % i === 0) {
        return false;
      }
    }
    return n > 1;
  }

  while (cont < quota) {
    const candidate = random(MAX_PRIME);
    if (isPrime(candidate) )
    { cont++;
      if (cont<100) generati.push(candidate);
    }
  }

  console.log(`Generazione terminata, ${generati}`);
  return generati;


}

//main.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>Document</title>
</head>
<body>

  Quanti numeri generare <input type="text" id="quanti">
  <button id="genera">Genera</buttn>
  <button id="stop">STOP</button>
  <br><br>
  <div id="output">   </div>

  <script>

    // async function f(url)
    // {
    //   let promise = fetch('https://anime-facts-rest-api.herokuapp.com/api/v1');

    //   let datiRestituitiDalWorker = await promise; //attendi (ma senza bloccare tutto!) la risposta

    //   console.log("Ho ottenuto la risposta!");

    //   return 999;
    // }

    // console.log(f());

    // for (let i=0; i<1000;i++) console.log(i);

    const worker = new Worker('worker.js');

    //quando il worker comandera' un postMessagge lo riceveremo qui sull'evento onmessage (e viceversa)
    worker.addEventListener('message', function (datiRestituitiDalWorker) {
          output.innerHTML=`Finito, generati ${datiRestituitiDalWorker.data.length} numeri primi. Listo al max i primi 10:<br>`;
          datiRestituitiDalWorker.data.slice(0, Math.min(10, datiRestituitiDalWorker.data.length))
            .forEach(element => output.innerHTML += element + '<br>');
        });

    document.getElementById('genera')
      .addEventListener('click', function () {

        //attiviamo il worker
        worker.postMessage(document.getElementById('quanti').value);
      });


    document.getElementById('stop')
      .addEventListener('click', _ => document.location.reload());


  </script>
</body>
</html>