JS Async: 19. Web Worker

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Worker</title>
</head>
<body>
<button id="buttonTask">Click Me</button>

<script>

    const worker = new Worker("worker.js");
    // event addEventListener ini akan dipanggil untuk menerima message dari workernya: postMessage(i).
    worker.addEventListener("message", function (message) {
        console.info(message.data);
    });

    document.getElementById("buttonTask").onclick = function () {
        worker.postMessage(100000); // mengirim perintah ke workernya
    };

</script>

</body>
</html>

JavaScript

// file: worker.js
// akan dieksekusi kalo menerima listener message
addEventListener("message", function (message) {
  const total = message.data;

  for (let i = 0; i < total; i++) {
    postMessage(i); // mengirim balik hasil tiap perulangan
  }
});