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

时间:2021-06-29 19:35:01

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)