HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web Worker — sum demo</title>
</head>
<body>
  <h1>Sum in a Web Worker</h1>
  <p>Click the button. The worker adds 0 + 1 + 2 + ... + 999999.</p>
  <p>Watch the counter below — it should keep going while the worker runs.</p>
  <button type="button" id="sumBtn">Start sum in worker</button>
  <p id="tick">Counter: 0</p>
  <p id="result">Result will appear here.</p>

  <script>
    // Counter proves the page is still alive
    var count = 0;
    setInterval(function () {
      count++;
      document.getElementById('tick').textContent = 'Counter: ' + count;
    }, 300);

    // Worker code: add numbers from 0 to limit-1
    var workerCode =
      'self.onmessage = function(e) {' +
      '  var limit = e.data, total = 0, i;' +
      '  for (i = 0; i < limit; i++) total += i;' +
      '  postMessage(total);' +
      '};';

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

    worker.onmessage = function (e) {
      document.getElementById('result').textContent =
        'Sum = ' + e.data;
    };

    document.getElementById('sumBtn').onclick = function () {
      document.getElementById('result').textContent = 'Working...';
      worker.postMessage(1000000);
    };
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Web Workers — Sum Numbers in Background