HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Worker Example</title>
</head>
<body>
  <h1>Web Worker Example</h1>
  <button id="start">Start Worker</button>
  <p id="result"></p>

  <script>
    // Worker code: square the number (n * n)
    var workerCode =
      'self.onmessage = function(e) {' +
      '  postMessage(e.data * e.data);' +
      '};';

    var worker = new Worker(
      URL.createObjectURL(new Blob([workerCode], { type: 'application/javascript' }))
    );

    // When worker sends answer, show it on the page
    worker.onmessage = function (event) {
      document.getElementById('result').textContent =
        'Result: ' + event.data;
    };

    // Send 10 to the worker when button is clicked
    document.getElementById('start').onclick = function () {
      worker.postMessage(10);
    };
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Web Workers — Square a Number