web workers 实现js多线程任务
需要注意的问题
- 分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
- 无法读取主线程所在网页的 DOM 对象，但是可以操作navigator对象和location对象
主线程中创建 Worker 实例，并监听 onmessage 事件
<body onload="init()">
<div id="result"></div>
<div id="results"></div>
<a class="a" href="javascript:fn()" >点我继续执行主线程任务</a>
</body>
<script>
function init(){
// js文件必须是网络资源
var worker = new Worker('compute.js');
// 向worker线程传递消息
worker.postMessage('Hello Worker')
// 监听worker线程返回的结果，event 参数中有 data 属性，就是子线程中返回的结果数据
worker.onmessage= function (event) {
// 把子线程返回的结果添加到 div 上
document.getElementById("result").innerHTML += event.data+"<br/>";
};
}
// 主线程的任务
function fn(){
var i = 0
setInterval(() => {
i++
$('#results').html(i)
}, 1000);
}
</script>
- worker线程计算完成后返回结果
// worker.js
// 接收主线程发来的消息
self.addEventListener('message', function (e) {
console.log('You said: ' + e.data);
}, false);
// worker线程计算结果
var i=0;
function timedCount(){
for(var j=0,sum=0;j<100;j++){
for(var i=0;i<100000000;i++){
sum+=i;
}
}
// 调用 postMessage 向主线程发送计算结果消息
this.postMessage(sum);
}
postMessage("Before computing,"+new Date().toLocaleString());
timedCount();
postMessage("After computing,"+new Date().toLocaleString());
- Worker 加载脚本
importScripts('script1.js', 'script2.js') - 关闭worker线程
// 主线程
worker.terminate();
// Worker 线程
self.close();
