|
Web Worker的基本原理就是在当前js的主线程中，使用Worker类加载一个js文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage，onmessage。
主机 worker 和 worker 脚本可以通过 postMessage 发送消息并使用 onmessage 事件侦听响应。消息的内容作为事件的数据属性进行发送。
var worker = new Worker('worker.js');
worker.onmessage = function(e) {
alert(e.data);
};
worker主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker，同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
worker新线程：
1.通过postMessage( data ) 方法来向主线程发送数据。
2.绑定onmessage方法来接收主线程发送过来的数据。
例子：计数功能
首先创建一个index.html文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div id="numDiv">0</div>
<button type="button" id="start">start</button>
<button type="button" id="stop">stop</button>
</body>
</html>
其次，创建一个count.js文件：
var countNum = 0;
function count(){
postMessage(countNum);
countNum++;
setTimeout(count,1000);
}
count();
再创建一个index.js文件
var numDiv;
var work = null;
window.onload = function () {
numDiv = document.getElementById('numDiv');
document.getElementById('start').onclick = startWorker;
document.getElementById('stop').onclick = function () {
if(work){
work.terminate();//停止，释放掉资源
work = null;//work重新初始化
}
};
};
function startWorker(){
if(work){
return;
}
work = new Worker('count.js');
work.onmessage = function (e) {
numDiv.innerHTML = e.data;
};
}
|