标签归档:Web Worker

Web Worker笔记

由于javascript是单线程,为了模拟多线程,通常是利用setTimeOut,setInterval,ajax的XMLHttpRequest。HTML5出现后,我们可以通过Worker实现js的多线程。

代码:
main.html:

<html>
 <head>
  <script type="text/javascript" src='test.js'></script>
  <script type="text/javascript">
	var worker = new Worker('test.js');
	worker.addEventListener('message',function(e){
		console.log('worker return :',e.data);
	},false);
	worker.postMessage('1');
	worker.postMessage('2');
	testFn();
	worker.postMessage('1');
  </script>
 </head>
</html>

test.js:

self.addEventListener('message',function(e){
	switch (e.data)
	{
	case "1":
		self.postMessage(e.data+": var a="+self.a);
		self.a = "worker var a: 1";
	break;
	case "2":
		self.postMessage(e.data+": var a="+self.a);
		self.a = "worker var a: 2";
		break;
	}

},false);
function testFn(){
	console.log("this is worker.js function");
	self.a="worker var a : function";
}

ps:页面不能直接打开运行,需要放在web服务器上,否则报安全错误:Uncaught Error: SECURITY_ERR: DOM Exception 18
运行结果:

this is worker.js function test.js:16
worker return : 1: var a=undefined main.html:8
worker return : 2: var a=worker var a: 1 main.html:8
worker return : 1: var a=worker var a: 2

可以看到:
1,testFn后调用反而先运行了。
2,testFn将a赋值为”worker var a : function”,虽然先运行了,但是后面打印的结果均无此结果,

总结:postMessage是异步调用,worker对象的window与js的window并非共享的

ps:Worker传递的对象是通过复制传递的,并非共享的

参考:
Web Workers 的基本信息