HTML5中的异步操作Web Worker的用法

1. 如何使用Worker

在index.html的<script></script>中添加如下的脚本：

var w=new Worker('work.js');//创建worker对象实例，指定异步调用的js文件
var obj={
	name:'michael';//这里将对象作为传递的数据，也可以用其他类型的数据，入string等
}
w.postMessage(obj);//向work.js文件传递数据
w.onmessage=function(event){
	console.log(event.data);//onmessage为监听操作，event.data位work.js回传的数据
}

work.js中的脚本如下：

self.addEventListener('message',function(event){
	var obj=event.data;
	obj.age='16';
	self.postMessage(obj);
},false)

这里可以用self或者this来获取worker自带的方法，若用this，只需将上述脚本中的“this.”删除即可

调用后得到：

Object{name: "michael", age: "16"}

2. 如何关闭Worker

1）worker.terminate(): 在外部终结该worker；

2）self.close(): 在worker内部自动终结。（官方推荐的用法）

3. 限制条件

1）不能跨域加载JS

2）worker内代码不能访问DOM；

3）浏览器兼容性差，而且也不是所有浏览器都支持。

4. 用处

1）加载一个JS进行大量的复杂计算；

2）通过importScripts(url)加载另外的脚本文件；

3）可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()；

4）可以使用XMLHttpRequest来发送请求（可以用来完成Ajax操作，但是请求速度比较慢，不推荐这么使用）；

5）可以访问navigator的部分属性。

下面展示用worker实现简单的计时操作：

index.html中的html:

<div id="time"></div>

index.html中的js:

var w=new Worker('work.js');
w.onmessage=function(event){
	document.getElementById('time').innerHTML=event.data;
}

work.js中的脚本：

var i=0;
function timer() {
	i++;
	postMessage(i);
}
setInterval('timer()',1000)