<button onclick="initWorker()">Init Worker</button>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker1()">Stop Worker 1</button>
<button onclick="stopWorker2()">Stop Worker 2</button>

<script id="worker1" type="javascript/worker">
  self.onmessage = function(event) {
    handleMessage(event);
  }
      
  function handleMessage(event) {
    console.log('[Worker]', 'Worker Thread receives command: ', event.data.cmd, event.data.msg);
    if(event.data.cmd == 'start') {
      for(var i = 0; i <= 10000000000; i++) {
        if(i % 1000000000 == 0) postMessage({cmd : 'resp', msg: i});
      }
    }
    else if(event.data.cmd == 'stop') {
      postMessage({cmd : 'stop', msg: 'Good Bye!'});
      self.close();
    }
  }
</script>
var myWorker;

function initWorker() {
  if(typeof(Worker) != 'undefined') {
    if(typeof(myWorker) == 'undefined') {

      var blob = new Blob([document.querySelector('#worker1').textContent]);
      var blobURL = window.URL.createObjectURL(blob);

      myWorker = new Worker(blobURL);
      console.log('[Main]', 'Init Web Worker');
      myWorker.onmessage = function(event) {
        handleMessage(event);
      }
      myWorker.onerror = function(event) {
        console.log('[Main]', 'Error', event.message, event);
      }
    }
  } else {
    console.log("[Main]", "The browser doesn't support web worker");
  }
}

function handleMessage(event) {
  console.log('[Main]', 'Main Thread receives command: ', event.data.cmd, event.data.msg);
  if(event.data.cmd == 'stop') {
    console.log('[Main]', 'Web Worker is already stopped');
  }
}

function startWorker() {
  if(typeof(myWorker) != 'undefined') {
    myWorker.postMessage({cmd : 'start', msg : 'hello'});
  } else {
    console.log('[Main]', 'Worker is undefined.');
  }
}

function stopWorker1() {
  if(typeof(myWorker) != 'undefined') {
    myWorker.terminate();
    myWorker = undefined;
    console.log('[Main]', 'Worker terminated.');  
  } else {
    console.log('[Main]', 'Worker is undefined.');
  }
}

function stopWorker2() {
  if(typeof(myWorker) != 'undefined') {
    myWorker.postMessage({cmd : 'stop', msg : 'bye'});
  } else {
    console.log('[Main]', 'Worker is undefined.');
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.