Basic Web Worker

by zhangchi

HTML

<span class='output'></span> <br />

<script id='worker' type='javascript/worker'>
	var runNum = 0,
		runner = function(addNum, multNum) {
		runNum += addNum * multNum;
		
		self.postMessage({ 'newNum': runNum });
		setTimeout(function() { self.runner(addNum, multNum); }, 1000);
	};

	self.onmessage = function(e) { // How to receive a message in a web worker
		runner(e.data.numberToAdd, e.data.multiply);
	}
</script>

CSS

.output {
	color: red;
	font-weight: bold;
}

Babel + JSX

// Web workers must exist in a seperate file or in seperate script tags as above
// A blob allows us to gather data from elsewhere on the page
var blob = new Blob([document.getElementById('worker').textContent]);
// We must call the Worker as a URL which is why we must gather the blob from above
var worker = new Worker(window.URL.createObjectURL(blob));

worker.onmessage = (e) => { // All messages from the worker must be dealt with like this
	document.getElementsByClassName('output')[0].innerHTML  = '快手计时器：'+e.data.newNum;
};

// Web workers are kicked off usually with a Post Message as here
worker.postMessage({ // initiate a message to a web worker
	'numberToAdd': 5,
	'multiply': 100
});