Web Worker Demo by Troy Whorten 3/20/2014 <br/> <br/>These web workers start computing primes and continuously return them, once a second. <br/>Each new worker cycles through the colors of the rainbow! <br/> <br/> <button onclick="getPrimes()">Add Worker!</button><label for="color">| Change color to:</label><input type="color" id="color" /> <div id="killZone"></div> <br/> <br/> <span id="prime"></span> <script type="javascript/worker" id="worker"> // this is the prime numbers code from the spec example var x = 1; var color; self.onmessage = function(e) { color = e.data; }; function isPrime(n) { if (n < 2) return false; var q = Math.sqrt(n); for (var i = 2; i <= q; i++) { if (n % i == 0) { return false; } } return true; } self.setInterval(function() { while (!isPrime(x)) x++; postMessage("<span style='color:" + color + "'>" + x + " </span>"); x++; }, 1000); </script>
var workBlob = new Blob([document.getElementById("worker").textContent]); var blobURL = window.webkitURL.createObjectURL(workBlob) || window.URL.createObjectURL(workBlob); var worker = new Array(); var colors = ["purple", "blue", "green", "yellow", "orange", "red", "fuchsia"]; function getPrimes() { //worker.terminate(); initWorker(); var primes = document.getElementById('prime'); var wrkIndex = worker.length - 1; worker[wrkIndex].postMessage(colors[worker.length % colors.length]); worker[wrkIndex].onmessage = function (event) { primes.innerHTML += event.data; } //primes.textContent += " End of getPrimes()"; } function killWorker(num, el) { worker[num].terminate(); el.parentNode.removeChild(el.nextSibling); el.parentNode.removeChild(el); //alert(worker.length); } function colorWorker(num, color) { worker[num].postMessage(color); } function initWorker() { worker.push(new Worker(blobURL)); var killZone = document.getElementById("killZone"); var btn = document.createElement("button"); btn.setAttribute("value", (Number(worker.length) - 1)); btn.onclick = function () { killWorker(this.getAttribute("value"), this); } btn.innerHTML = "Kill " + (Number(worker.length) - 1) + "!"; killZone.appendChild(btn); var clrbtn = document.createElement("button"); clrbtn.setAttribute("value", (Number(worker.length) - 1)); clrbtn.onclick = function () { colorWorker(this.getAttribute("value"), document.getElementById("color").value); } clrbtn.innerHTML = "Color " + (Number(worker.length) - 1) + "!"; killZone.appendChild(clrbtn); }